ES6展开运算符的10个用法

展开运算符的用法1：传参

  　　　　// 展开运算符的用法1 : 传参 
        function test(a,b) {
            return a + b ;
        }

        var arr = [1,2];

        console.log(test(...arr)); // 3 

 参数不确定时

        function test(...m) {
            var s = 0
            for(var i of m){
                s = s + i;
                console.log(i); // 1,6,3
            }
            return  s ;
        }
        console.log(test(1,6,3));   // 10 

 

展开运算符的用法2：往数组添加元素

//展开运算符的用法2 ： 往数组里添加元素
        var items = [1,2,3];
        var newArr  =  [...items,4]
        console.log(newArr); // [1,2,3,4]

 

展开操作符的用法3：合并对象属性，和Object.assign作用是一样的

//展开操作符的用法3：合并对象属性
        var obj = {name:"zs",age:12};
        var obj2 = {age:14,addr:"gz"}
        console.log({...obj,...obj2}); // {name:"zs",age:14,addr:"gz"}

 展开操作符的用法4：合并数组,但不去重

        // 写法1：

       let e = [1,2,3],f = [1,2,3],g = [...e,...f]

       console.log(g);

       // 写法2：push

       console.log(e.push(...f)); // 返回长度 6

 

展开操作符用法5:解构赋值

 //展开操作符用法5:解构赋值
        var [a,...b] = [3,4,5];
        console.log(a); // 3
        console.log(b); // [4,5]

 

展开操作符用法6:分解字符串

   //展开操作符用法6:分解字符串
        var str = "test";
        console.log(...str); // t e s t 
        var [a,b,c,d] = [...str]
        console.log(a); // t 
        console.log(b); // e 
        console.log(c); // s 
        console.log(d); // t

 

 展开操作符用法7:展开dom元素，把dom元素变成数组

 let div =  document.querySelectorAll('div'),c = [...div]  
 c.forEach(v=>console.log(v.innerText))

 

展开操作符用法8:展开表达式

  //  扩展运算符放置表达式
        //    example1 数组
        let d = [...(5 > 3 ? [5] : [3]), 6]
        console.log(d);// [5,6]

        // example2 对象
        var obj12 = { ...(5 > 3 ? { name: 'ww' } : { name: 'zs' }), age: 12 }
        console.log(obj12);

 

展开操作符用法9：复制数组

  let h = [1,2,3],i =[...h]
       console.log(i);

 

 展开操作符的用法10：把set集合变成数组

   let j = [1,2,3],set = new Set([...j])
       console.log([...set]);

 展开set集合和Array.from(set) 的作用是一样的，都是把set集合转为数组