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

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

---

目录

• ES6 第四节 扩展运算符和rest运算符
  • 第四节 扩展运算符和rest运算符
    • 对象扩展运算符（...）：
      • 扩展运算符的用处：
    • rest运算符
      • 如何循环输出rest运算符

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

扩展运算符和rest运算符，都是…（三个点）。它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。

对象扩展运算符（...）：

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

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

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

扩展运算符的用处：

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

let arr1=['w','dd','aaa'];
let arr2=arr1;
console.log(arr2);
arr2.push('todo');
console.log(arr1);

控制台输出：

["w", "dd", "aaa"]
["w", "dd", "aaa", "todo"]

可以利用对象扩展运算符解决这个问题，改一下代码：

let arr1=['w','dd','aaa'];
//let arr2=arr1;
let arr2=[...arr1];  //表示arr1里的每一个元素
console.log(arr2);
arr2.push('todo');
console.log(arr2);
console.log(arr1);

现在的结果就变成：

["w", "dd", "aaa"]
["w", "dd", "aaa", "todo"]
["w", "dd", "aaa"]  //arr1的值并没有改变

rest运算符

eg：

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

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

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

如何循环输出rest运算符

这里我们用for…of循环来进行打印出arg的值，只是一个简单的使用。

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

for…of的循环可以避免我们开拓内存空间，增加代码运行效率，虽然最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。