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运算符。