展开运算符（Spread Operator）：数组与对象的便捷操作

展开运算符：JavaScript 的魔术棒，让你的代码瞬间优雅！

各位看官，今天咱们聊聊 JavaScript 里一个特别有趣，也特别实用的家伙：展开运算符（Spread Operator）。别看它名字挺唬人，其实用起来简单到爆，就像变魔术一样，能让你的代码瞬间变得优雅起来。

想象一下，你手里拿着一袋糖果，想把这些糖果分给一群小朋友。如果没展开运算符，你可能得一颗一颗地发，累得够呛。但有了它，你只需要轻轻一挥手，糖果就自动分好了，是不是很神奇？展开运算符就是 JavaScript 里的那根“魔术棒”。

什么是展开运算符？

展开运算符长得非常简洁，就是三个点： ... 没错，就是这么简单！它可以把一个数组或者一个对象“展开”成一个个独立的元素。

展开运算符的妙用：数组篇

合并数组：告别笨重的 concat()

以前我们要合并两个数组，通常会用到 concat() 方法，代码看起来有点冗长：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

现在有了展开运算符，合并数组简直不要太轻松：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

是不是简洁多了？就像把两袋糖果倒在一起，简单粗暴，效果拔群！

复制数组：防止“藕断丝连”

在 JavaScript 里，直接赋值数组其实只是创建了一个新的引用，而不是真正复制了一份。这意味着，如果你修改了新数组，原来的数组也会跟着改变，这可不是我们想要的结果，简直就是“藕断丝连”啊！

const originalArr = [1, 2, 3];
const newArr = originalArr; // 只是创建了一个新的引用

newArr[0] = 10;

console.log(originalArr); // [10, 2, 3]  哎呀，原来的数组也被修改了！

展开运算符可以帮你彻底解决这个问题，它会创建一个全新的数组，完全独立于原来的数组：

const originalArr = [1, 2, 3];
const newArr = [...originalArr]; // 创建了一个全新的数组

newArr[0] = 10;

console.log(originalArr); // [1, 2, 3]  原来的数组安然无恙！
console.log(newArr);      // [10, 2, 3]  新数组修改成功！

就像复制了一份文件，你修改哪份都不会影响另一份，再也不怕“藕断丝连”了！

在数组中插入元素：想插哪里插哪里

有时候，我们想在数组的某个位置插入一个或多个元素，用展开运算符可以轻松实现：

const arr = [1, 2, 3, 4, 5];

const newArr = [1, 2, ...[10, 20], 3, 4, 5]; // 在 2 后面插入 10 和 20

console.log(newArr); // [1, 2, 10, 20, 3, 4, 5]

想插哪里插哪里，简直不要太灵活！就像在队伍里插队，想插谁前面就插谁前面，当然，现实生活中咱们可不能这么做啊！

用于函数参数：让函数更灵活

展开运算符还可以用于函数参数，让函数可以接收任意数量的参数：

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

这个 ...numbers 被称为剩余参数（Rest Parameters），它会将所有传入的参数收集到一个数组 numbers 中。

想象一下，你去餐厅点菜，服务员说：“您想点几个菜都可以，我们都能上！” 展开运算符就相当于这个服务员，让你的函数可以“来者不拒”，接收任意数量的参数。

展开运算符的妙用：对象篇

合并对象：告别 Object.assign()

和合并数组类似，合并对象以前通常使用 Object.assign() 方法：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObj = Object.assign({}, obj1, obj2); // { a: 1, b: 2, c: 3, d: 4 }

现在有了展开运算符，代码更加简洁：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

复制对象：深拷贝不再是难题

和数组一样，直接赋值对象也只是创建了一个新的引用。如果想要创建一个完全独立的对象，可以使用展开运算符：

const originalObj = { a: 1, b: 2 };
const newObj = { ...originalObj }; // 创建了一个全新的对象

newObj.a = 10;

console.log(originalObj); // { a: 1, b: 2 }  原来的对象安然无恙！
console.log(newObj);      // { a: 10, b: 2 } 新对象修改成功！

需要注意的是，展开运算符只能进行浅拷贝。如果对象中包含嵌套的对象或数组，展开运算符只会复制它们的引用，而不是真正复制它们的内容。如果需要深拷贝，可以使用 JSON.parse(JSON.stringify(obj)) 或者其他深拷贝方法。

修改对象属性：优雅地更新数据

展开运算符可以让你优雅地修改对象属性，而不用直接修改原对象：

const obj = { a: 1, b: 2, c: 3 };

const newObj = { ...obj, a: 10 }; // 修改属性 a 的值为 10

console.log(newObj); // { a: 10, b: 2, c: 3 }

就像给照片加滤镜，你可以在原照片的基础上进行修改，而不会破坏原照片。

展开运算符的注意事项

展开运算符只能用于可迭代对象（Iterable Objects）和对象字面量。 可迭代对象是指可以使用 for...of 循环遍历的对象，例如数组、字符串、Set、Map 等。
展开运算符的顺序很重要。 如果多个对象有相同的属性，后面的对象会覆盖前面的对象。

总结

展开运算符是 JavaScript 里一个非常强大和实用的工具，它可以简化你的代码，提高你的开发效率。掌握了展开运算符，就像拥有了一根“魔术棒”，可以轻松地操作数组和对象，让你的代码瞬间变得优雅起来。

所以，下次当你需要合并数组、复制对象、修改属性或者让函数接收任意数量的参数时，不妨试试展开运算符，相信它会给你带来惊喜！希望这篇文章能让你对展开运算符有一个更深入的了解，并能在实际开发中灵活运用。

记住，代码不仅要能跑，还要跑得漂亮！展开运算符，就是让你的代码更漂亮的那把刷子！

展开运算符：JavaScript 的魔术棒，让你的代码瞬间优雅！

发表回复 取消回复

发表回复取消回复