展开语法
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
展开语法是ES6中新增的一种语法，符号是三个点(...)，作用是将数组、字符串或对象中的属性或元素展开。
注意对象的展开是
ECMAScript2018规范新增特性，可能需要babel转换才能支持
基础语法
在需要展开的对象前加三个点即可：
let set = new Set(['1', '2', '3']);
console.log(set); // Set { '1', '2', '3' }
console.log(...set); // 1 2 3
可以看到，通过展开语法，我们很方便地将set中的所有元素取了出来。
在函数调用时使用
在ES6之前，我们要将数组中的元素迭代作为参数传递给函数，一般会使用apply的方式：
function es5Fun(a, b, c) {
console.log(a, b, c);
}
es5Fun.apply(null, ['a', 'b', 'c']);
而有了ES6的展开语法，我们就可以这样写了：
function es6Fun(a, b, c) {
console.log(a, b, c);
}
es6Fun(...['a', 'b', 'c']);
利用展开语法不但写法更简洁，功能也更强大，可以展开所有的对象和其它实现了Iterator接口的类型，而且可以多次展开。ES5的apply则只能展开一次且只能用于数组类型：
function es6Fun(a, b, c) {
console.log(a, b, c);
}
es6Fun(...[...'ab','c']); // 支持字符串和多次展开
function es5Fun(a, b, c) {
console.log(a, b, c);
}
es5Fun.apply(null, 'abc'); // TypeError: CreateListFromArrayLike called on non-object
构建数组字面量时使用
展开语法可以很方便地进行数组的拷贝、连接等操作：
let array1 = [1, 2];
let array2 = [...array1];
console.log(array2); // [1,2]，array2拷贝了array1,属于浅拷贝
console.log([...array1, ...array2]); // [1,2,1,2]，连接了array1和array2
console.log([4, ...array1, ...array2, 3]);[4,1,2,1,2,3]
剩余语法
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
剩余语法的符号与展开语法的符号是相同的，都是三个点(...)。但是两者的作用刚好相反，展开语法是将一个数组或对象展开为多个元素，而剩余语法则是将多个元素结合成一个数组。
基础语法
剩余语法一般与 解构赋值 结合在一起使用，用于一次性取出数组中剩余的所有值：
let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [ 3, 4, 5 ]
本文由 李海平 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Aug 9,2019