第四节、rest运算符和扩展运算符

扩展运算符和rest运算符，它们都是  …  。就是三个点、三个点、三个点，不是省略号。

rest运算符

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示，我们先来看一个例子。

function restMethods(first,...arg) {
    console.log(arg.length)
}
restMethods(0,1,2,3,4);

这时候控制台打印出了4，说明我们arg里有4个数组元素，这就是rest运算符的最简单用法。

这里我们用for…in(或者for…of）循环来进行打印出arg的值，我们这里只是简单使用一下，以后我们会专门讲解for…in(或者for…of）循环。

function restMethods(first,...arg) {
    for(let item in arg){
        console.log(item);
    }
}
restMethods(0,1,2,3,4);

数组扩展运算符（…）：

扩展运算符（spread）是三个点（ ...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

对象扩展运算符（…）：

当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：

function addMore(...arg) {
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
}
addMore(1,2);

这时我们看到控制台输出了 1,2，undefined，这说明是可以传入多个值，并且就算方法中引用多了也不会报错。

（1）解构赋值

对象的解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

上面代码中，变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键（a和b），将它们连同值一起拷贝过来。

注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
console.log(x.a.b) // 2

（2）扩展运算符

扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。这等同于使用Object.assign方法。

扩展运算符的用处：

我们先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);  //[1,2,3,4]
console.log(arr2);  //[1,2,3,4]

控制台打印的两个数组是一样的， 这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。

let arr1 = [1,2,3];
let arr2 = [...arr1];
console.log(arr2);  //[1,2,3]
arr2.push(4);
console.log(arr1);  //[1,2,3]
console.log(arr2);  //[1,2,3,4]

现在控制台预览时，你可以看到我们的arr1并没有改变，简单的扩展运算符就解决了这个问题。

总结：我们这节课学习了对象扩展运算符和reet运算符，它们两个还是非常类似的，但是你要自己区分，这样才能在工作中运用自如。在以后的课程中还会有很多关于扩展运算符和rset运算符的妙用，让我们一起期待吧。