ES6的展开运算符和剩余运算符

在ES6中， 三个点(...) 有2个含义。分别表示 展开运算符 和 剩余运算符。

展开运算符

/******************展开运算符(spread)********************/

     // 1、传递数据代替多个字符串的形式

     function func (a, b, c) {

         console.log(a);

         console.log(b);

         console.log(c);

     }

     var arr = [1, 2, 3];

     test(...arr);

    

     // 2、合并数组

     var arr1 = [1, 2, 3, 4];

     var arr2 = [...arr1, 4, 5, 6];

     //  var arr2 = [4, 5, 6];

     //  arr1.push(...arr2);

     console.log(arr2);    // [1, 2, 3, 4, 4, 5, 6]


     // 3、合并对象

     var info = {

         target: "啦啦啦",

         url: "www.lalala.com"

     }

     var obj = {

         address: "啧啧啧",

         age: 4,

         ...infor

     };

     console.log(obj);


     // 4、字符串转数据

     var str='loycoder';

     var arr3= [...str];

     console.log(arr3);

展开运算符：

前面对展开运算符功能做了简单的演示，下面做一下总结介绍。

（1）.在函数调用时，在参数中，将具有Iterator接口的对象展开。

（2）.在数组创建时，将具有Iterator接口的对象展开。

（3）.创建对象直接量时，将对象直接量按照键值对方式展开（ES2018新增）。

关于Iterator接口可以参阅ES2015 Iterator遍历器。

 

剩余运算符

/******************剩余运算符(rest)********************/
    // 当函数参数个数不确定时，用 rest运算符
    function func1 (...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    func1(1, 3, 5);

    // 当函数参数个数不确定时的第二种情况
    function func2 (item, ...arr) {
        console.log(item);
        console.log(arr);
    }
    func2(1, 2, 34);

    // 配合解构赋值使用：
    let [a,...temp]=[1, 2, 4];
    let { web,...rest }={ web: "啦啦啦", age: 6, address: "略略略" };
    console.log(a);
    console.log(temp);
    console.log(web);
    console.log(rest);

剩余运算符：

前面对剩余运算符功能做了简单的演示，下面做一下总结介绍。

（1）用于将剩余多个值压缩收集起来生成一个数组作为参数。

（2）剩余运算符构成的剩余参数只能位于参数列表的最后一位。

（3）将剩余对象属性值收集生成新对象（ES2018新增）。

 

展开运算符和剩余运算符的区别

展开运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值，即打散操作；

剩余运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组，是展开运算符的反向操作，即打包操作；

 

最后，补充一下：

ES6之所以把这两个关键字设成一致的写法，是因为它们本质是一样，都是解构赋值。

当三个点(...)在等号左边，或者放在形参上。为 rest 运算符

当三个在等号右边，或者放在实参上，是 spread运算符

或者说：

放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。