ES6的扩展操作符

ES6中的扩展操作符实际上与rest参数非常相似。前者是...，后者则是...+变量名。

那它们主要的区别我个人认为主要是两个：

1. rest参数使用在函数的参数定义时，扩展操作符使用在函数调用时。

function foo(...items){ //这里的...items就是rest参数
    console.log(items);
}

console.log(...[1,2,3,4,5]);    //这里的...就是扩展操作符

2. 扩展操作符可以理解为rest参数的逆操作

为什么这么说呢？从它们的作用就可以窥见一二。rest参数是将所有“多余”的参数都放进数组。例如

function foo(x, ...items){
    console.log(x + '\n');
    console.log(items);
}

foo(1,2,3,4,5,6);   
/*
1
[2,3,4,5,6]
*/

可以看出1之后的“多余”的2,3,4,5,6都被放进了一个数组并赋值给了items变量。

而扩展操作符则是将数组转换成由逗号分隔的参数序列。例如，

let arr = [];
let nums = [1,2,3,4,5,6,7,8,9];

arr.push(...nums);

console.log(arr);   //[1,2,3,4,5,6,7,8,9]

若是给arr数组的push方法直接传入nums数组，那么输出的结果将会是一个二维数组。

---

在函数调用中使用扩展操作符将可以实现类似于解构赋值的效果。注意，仅仅只是类似。 例如，

function pow(x, y){
    return x ** y;
}

let nums = [2,3];

console.log(pow(...nums));  //8

这个例子中nums中的2和3都分别赋值给了x和y。