(...) 三个点 ？《ES6扩展运算符》让你的代码更优雅

对象扩展运算符（…）：

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

// 拓展运算符
learnES6(...arg) {
   console.log(arg[0]); // 1
   console.log(arg[1]); // 2
   console.log(arg[2]); // 3
   console.log(arg[3]); // undefined
},
learnES6(1,2,3);

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

扩展运算符的用处（深拷贝）：

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

      let arr1 = ["我要", "学会", "ES6"];
      let arr2 = arr1;
      console.log(arr2);
      arr2.push("加油");
      console.log(arr1);
      console.log(arr2)

控制台输出：

(3) ["我要", "学会", "ES6"]
(4) ["我要", "学会", "ES6", "加油"]
(4) ["我要", "学会", "ES6", "加油"]

这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。

      let arr2 = ["我要", "学会", "ES6"];
      let arr3  = [...arr2]
      console.log(arr3)
      arr3.push('嘿嘿')
      console.log(arr3)
      console.log(arr1)

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

(3) ["我要", "学会", "ES6"]
(4) ["我要", "学会", "ES6", "嘿嘿"]
(3) ["我要", "学会", "ES6"]

• 扩展运算符还可以将字符串转为真正的数组

      let a = [...'afc']
      console.log(a) // (3) ["a", "f", "c"]

• 合并数组

      let arry1 = [2,3,4]
      let arry2 = [1, ...arry1 , 5 , 6]
      console.log(arry2) // (6) [1, 2, 3, 4, 5, 6]

• 扩展运算符可以与解构赋值结合起来，用于生成数组

      let [one, ...two] = [12, 13, 14 , 15]
      console.log(one) // 12
      console.log(two) // (3) [13, 14, 15]

rest运算符

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

function jspang(first,...arg){
    console.log(arg.length);
}

jspang(0,1,2,3,4,5,6,7);

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

如何循环输出rest运算符

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

function jspang(first,...arg){
    for(let val of arg){
        console.log(val); // 1,2,3,4,5,6,7
    }
}

jspang(0,1,2,3,4,5,6,7);

for…of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。