ES6扩展运算符（Spread Operator）核心用法与注意事项

扩展运算符概述

ES6中的扩展运算符（Spread Operator）在实际开发中应用广泛，它极大地简化了多参数函数的传参过程，替代了传统的apply方法，并在数组合并及与解构赋值配合使用时提供了显著的便利性。

扩展运算符由三个连续的点“...”表示，其核心作用是将实现了Iterator接口的对象中的元素逐一迭代并提取出来，转化为独立的值供后续使用。

以下示例展示了扩展运算符的基本行为：

console.log(...[3, 4, 5])

运行结果如下：

3 4 5

上述调用实际上等价于：

console.log(3, 4, 5)

数组合并

利用扩展运算符，可以便捷地将多个数组合并为一个数组。

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

运行结果如下：

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

函数多参数传递与替代Apply

首先定义参数数组及目标函数。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
 console.log( a1, a2, a3, a4)
}

在ES6之前，若要将数组元素作为参数传递给函数，通常需通过下标逐个访问数组元素进行调用。这种方式的缺点在于数组长度与函数参数数量严格绑定，一旦数组长度发生变化，代码必须随之修改。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

另一种常见做法是使用apply方法进行调用，这在ES6之前是主流方案，且运行无误。

fun1.apply(null, arr4)

若使用扩展运算符，代码将更加简洁便捷。

fun1(...arr4)

运行结果如下：

arg1 arg2 arg3 arg4

这种调用方式既简洁又高效。

与解构赋值配合使用

结合解构语法，可以从数组中分离出第一个元素，并将剩余所有元素收集到另一个数组中。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

运行结果如下：

1 [ 2, 3, 4, 5, 6 ]

需注意，当与解构赋值配合使用时，扩展运算符只能出现在解构列表的最后一位，否则将引发语法错误。

扩展运算符可用于展开实现了Iterator接口的对象。

例如Map、Set和数组均实现了Iterator接口，而普通Object未实现，因此尝试展开Object会抛出错误。

以下示例演示了展开Set：

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

运行结果：

1 2 3

以下示例演示了展开Map：

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

运行结果：

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

需要注意的是，展开Map后生成的是一个个独立的数组，每个数组包含两个元素，分别对应Map中的键（key）和值（value）。

如果尝试展开普通Object，程序将报错。

let obj1 = {
  p1: 1,
  p2: 2,
  p3: 3
}
console.log(...obj1)

错误信息如下：

总结

以上内容介绍了ES6扩展运算符的主要用途，希望能对读者有所帮助。如有任何疑问，欢迎留言讨论，作者将及时回复。