扩展运算符是三个点...。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]) // 1 2 3 console.log(1,...[2,3,4],5) //1 2 3 4 5
该运算主要用于函数调用
function push(array,...items){
array.push(...items)
}
let a=[1,2]
push(a,3,3,3)
a //[1, 2, 3, 3, 3]
...运算符将一个数组，变为参数序列。
扩展运算符与正常的函数参数可以结合使用。
function f(v,w,x,y,z){
console.log(v,w,x,y,z);
}
f(-1,...[1,2],2,...[3]) //-1，1，2，2，3
f(-1,...[1,2,3],2,...[3]) //-1，1，2，3,2
扩展运算符后面还可以放置表达式。
const x = 2 const arr = [...(x > 0 ? ['a'] : []),'b'] arr //['a','b']
若扩展运算符后面是一个空数组，则不产生任何效果。
[...[],1] //[1]
扩展运算符可以展开数组，可替代函数的apply方法，将数组转为函数的参数。
// ES5
function f(x,y,z){
// ...
}
var args = [0, 1, 2]
f.apply(null,args)
//ES6
function f(x, y, z){
// ...
}
let args = [0, 1, 2]
f(...args)
实例如下：
// ES5 Math.max.apply(null,[14,3,77]) //77 // ES6 Math.max(...[14,3,77]) //77 // 等同于 Math.max(14,3,77) //77
// ES5 var arr1 = [0,1,2]; var arr2 = [3,4,5]; Array.prototype.push.apply(arr1,arr2) arr1 //[0,1,2,3,4,5] //ES6 var arr1 = [0,1,2] var arr2 = [3,4,5] arr1.push(...arr2)
扩展运算符的应用
（1）复制数组
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。
var a1 = [1,2] var a2 = a1 a2[0] = 2 a1 //[2,2]
上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。
ES5只能用变通的方法来复制数组。
var a1 = [1,2] var a2 = a1.concat() a2[0] = 2 a1 //[1,2]
上面代码中，a1会返回原数组的克隆，再修改a2不会对a1产生影响。
扩展运算符提供了复制数组的简便写法。
var a1 = [1,2] //写法一 var a2 = [...a1] //写法二 var [...a2] = a1
（2）合并数组
//ES5 [1,2].concat([3,4,5]) // [1, 2, 3, 4, 5] //ES6 [1,2,...[3,4,5]] // [1, 2, 3, 4, 5] var arr1 = ['a','b'] var arr2 = ['c'] var arr3 = ['d','e'] //ES5 arr1.concat(arr2,arr3) //ES6 [...arr1,...arr2,...arr3]
（3）与解构赋值结合
扩展运算符可以与解构赋值结合起来，用于生成数组。
var list = [0,1,2,3,4] //ES5 a = list[0] rest = list.slice(1) //ES6 [a,...rest] = list
其他例子：
var [first, ...rest] = [1,2,3,4,5] first // 1 rest // [2, 3, 4, 5] var [first, ...rest] = [] first //undefined rest //[] const [first, ...rest] = ['foo'] first //'foo' rest //[]
如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
（4）字符串
扩展运算符还可以将字符串转为真正的数组。
[...'hello'] // ["h", "e", "l", "l", "o"]
js会将四个字节的Unicode字符，识别为2个字符，采用扩展运算符就没有这个问题。
返回字符串长度的函数：
function length(str){
return [...str].length
}
length('x\uD83D\uDE80y') // 3
//不使用扩展运算符会有问题
'x\uD83D\uDE80y'.length //4
（5）实现了Iterator接口的对象
任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div)
let array = [...nodeList]
nodeList不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了Iterator。
var arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
var arr = [...arrayLike];
上面代码中，arrayLike是一个类似数组的对象，但是没有部署Iterator接口，扩展运算符就会报错。可改为Array.from方法将arrayLike转为真正的数组。
var arrayLike = Array.from({
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
});
arrayLike //['a','b','c']
（6）Map和Set结构，Generator函数
扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构。
let map = new Map([ [1,'one'], [2,'two'], [3,'three'] ]) let arr = [...map.keys()] // [1,2,3] let arr2 = [...map.values()] // ["one", "two", "three"]
Generator函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。
const go = function*() {
yield 1;
yield 2;
yield 3;
}
[...go()] // [1,2,3]