ES6 中的数组展开运算符技巧
前言 在 ES6 中，JavaScript 新增了许多语言级别的功能和语法特性，其中之一就是数组展开运算符。这个运算符还是相对比较新的，许多人并不清楚使用它能做些什么，所以今天我们就来详细介绍一下数组展开运算符的一些技巧和实际应用。
一、什么是数组展开运算符
数组展开运算符是三个点(...)的符号，表示将一个数组展开成一系列参数。
例如，当我们以如下方式使用数组展开运算符时：
const arr = [1, 2, 3]; console.log(...arr); // 1 2 3
这里的 console.log() 函数中，我们使用了数组展开运算符将 arr 数组展开成了一个参数序列，并在控制台打印出了每个元素。这和我们上面常规的方式输出 arr 数组的代码是等价的：
const arr = [1, 2, 3]; console.log(arr[0], arr[1], arr[2]); // 1 2 3
但使用数组展开运算符有许多优点，我们在下面介绍。
二、将数组与其他数组连接
有些时候，我们需要将一个数组中的元素添加到另一个数组中。通过使用数组展开运算符，我们可以将两个数组连接：
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在这个例子中，我们使用了数组展开运算符来将 arr1 和 arr2 连接起来，并将结果存储到 arr3 变量中。这样的代码比直接 push 要简洁且更实用。
三、数组拷贝
在 ES5 中，将一个数组复制到另一个变量需要使用 slice() 或 concat() 等方法。但是，在 ES6 中，我们可以使用数组展开运算符来实现更加简化的操作：
let arr1 = [1, 2, 3]; let arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
这个例子中，我们使用了数组展开运算符来将 arr1 中的元素复制到 arr2 中。这个方法不仅简单，而且运行速度更快。
四、使用展开运算符传递函数参数
我们可以使用展开运算符来传递一个元素数组给函数，这时函数将处理每个元素。这种方式比传递整个数组要更加灵活：
function sum(a, b, c) {
return a + b + c;
}
let arr = [1, 2, 3];
console.log(sum(...arr)); // 6这个例子中，我们使用了数组展开运算符来将 arr 数组的元素作为参数传递给 sum() 函数。
五、使用展开运算符在数组中添加元素
我们可以使用数组展开运算符来在数组中添加元素：
let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4]; console.log(arr2); // [1, 2, 3, 4]
这个例子中，我们使用了数组展开运算符将 arr1 中的元素添加到 arr2 变量中，并将 4 添加到 arr2。这比使用 push() 方法简单且更加易读。
六、使用展开运算符移除数组中的元素
我们也可以使用数组展开运算符来在数组中移除元素：
let arr1 = [1, 2, 3, 4, 5]; let arr2 = [...arr1.slice(0, 2), ...arr1.slice(3)]; console.log(arr2); // [1, 2, 4, 5]
这个例子中，我们使用了数组展开运算符和 slice() 方法来将 arr1 变量的第三个元素移除，并将结果存储到 arr2 变量中。
结论 数组展开运算符是 ES6 的一项功能强大的特性。使用这个运算符能够更加简单地编写代码，同时提高代码的可读性和性能。我们在开发中应该充分运用该特性来提升我们的工作效率及代码品质。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6750d12e050cf9039c16d316