对象扩展运算符 & rest运算符

ES6

运算符可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。

对象扩展运算符（…）：

对象扩展运算符主要用在不确定参数个数的时候

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

// arg可以随意用其他命名代替
function fun(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
fun(1, 2, 3);   // 1 2 3 undefined

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

以前我们定义函数是以下写法

function fun(a, b, c){
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}
fun(1, 2, 3);   // 1 2 3 报错 

通过看控制台，我们看到他在报错，由于我们打印了一个没有定义的d，这时我们用对象扩展运算符就可以减少我们的错误

扩展运算符的用处：

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

let arr1 = ['www','123','abc'];
let arr2 = arr1;
console.log(arr2);      // ["www", "123", "abc"]
arr2.push('aaa');
console.log(arr1);      // ["www", "123", "abc", "aaa"]

我们发现没有改变arr1的值，但是arr1的值也改变了，这是我们不想看到的。这时就可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。

let arr1 = ['www','123','abc'];
// let arr2 = arr1;
let arr2 = [...arr1];   // ...指的是赋值的是里面的每一个元素，而不是arr1对象
console.log(arr2);      // ["www", "123", "abc"]
arr2.push('aaa');
console.log(arr2);      // ["www", "123", "abc", "aaa"]
console.log(arr1);      // ["www", "123", "abc"]

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

rest运算符

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

function fun(first, ...arg){
    console.log(arg.length);
}
fun(0,1,2,3,4,5,6,7);       // 7

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

注意：这里的arg不包括确定的参数first，所以打印出来的长度是7，而不是8

for…of...循环输出rest运算符

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

function fun(first, ...arg){
    // for (let i = 0; i < arg.length; i++){
    //     console.log(arg[i]);        // 1 2 3 4 5 6 7
    // }
    // 以前我们会使用以上ES5方法循环输出，使用这种方法尽管我们用了let，但是还是会开辟一小块内存空间来存放i，这样会影响我们的编码效率。这时我们就可以用ES6的for...or...写法
    for (let val of arg){
        console.log(val);           // 1 2 3 4 5 6 7
    }
}
fun(0,1,2,3,4,5,6,7);

for…of...的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就提高了开发效率。而且这种方法更加利于我们查看代码。此外如果浏览器支持我们的ES6代码，那么用ES6循环比ES5循环的效率要高点

总结： 对象扩展运算符和reet运算符，它们两个还是非常类似的，但是你要自己区分，这样才能在工作中运用自如。