ES6中扩展运算符(spread)和剩余运算符(rest)详解

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

1.扩展运算符(spread)

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

   //demo 1  传递数据代替多个字符串的形式
     function  test(a,b,c){
         console.log(a);
         console.log(b);
         console.log(c);
     }

     var arr = [1, 2, 3];
     test(...arr);//输出  1 2 3
     
    

     //demo2 将一个数组插入到另一个数据中
     var arr1 = [1, 2, 3,4];
     var arr2 = [...arr1, 4, 5, 6];
     console.log(arr2); //输出数组[1,2,3,4,4,5,6]


     //demo3  字符串转数据
     var str='loycoder';
     var arr3= [...str];
     console.log(arr3); //输出 ['l','o','y','c','o','d','e','r']

2.剩余运算符(rest)

rest运算符用三个点号表示，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

  //demo4  当函数参数个数不确定时，用 rest运算符
    function rest01(...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    rest01(1, 3, 5);//输出  1  2  3

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

    //demo6 rest运算符配合 解构使用：
    var [a,...temp]=[1, 2, 4];
    console.log(a); //输出  1
    console.log(temp); //输出 [2,4]

3.总结：

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

或者说：

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

作者：loycoder
链接：https://www.jianshu.com/p/3928e0571874
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。