详解es6 扩展运算符(...)的各种妙用

爱被打了一巴掌 2021-12-05 20:19 225阅读 1赞

*  # **数组的扩展运算符** #

1.  ### 将数组变成参数化序列 ###
    
        function plus(x, y) {
          return x + y;
        }
        
        const numbers = [1, 2];
        console.log(...numbers) // 1 2
        console.log(plus(...numbers)) //3
2.  ### 复制数组 ###
    
        // ES5
        const a1 = [1, 2];
        const a2 = a1.concat();
        // ES6
        const a1 = [1, 2];
        const a2 = [...a1];
3.  ### 合并数组 ###
    
        let a1 = [1,2]
        let a2 = [3,4]
        let a3 = [1,4]
        // ES5
        let a = a1.concat(a2, a3); // [1, 2, 3, 4, 1, 4]
        // ES6
        let a = [...a1, ...a2, ...a3] // [1, 2, 3, 4, 1, 4]
4.  ### 和解构赋值结合生成数组（扩展运算符参数必须在最后一位） ###
    
        let [a1, ...list] = [1, 2, 3, 4, 5];
        console.log(list) // [2, 3, 4, 5]
        
        let [...list, a1] = [1, 2, 3, 4, 5];
        console.log(list) // Uncaught SyntaxError: Rest element must be last element
        
        let [a1, ...list, a2] = [1, 2, 3, 4, 5];
        console.log(list) // Uncaught SyntaxError: Rest element must be last element
5.  ### 使用Math函数 ###
    
        let a1 = [1, 2, 4, 5];
        // ES5 的写法
        Math.max.apply(null, a1) // 5
        // ES6 的写法
        Math.max(...a1) // 5
6.  ### 和set结构结合实现数组或字符串去重 ###
    
        let a1 = [1, 2, 3, 4, 1, 4];
        // Array.from
        console.log(Array.from(new Set(a1))) // [1, 2, 3, 4]
        // 展开运算符
        console.log([...new Set(a1)]) // [1, 2, 3, 4]
        //字符串去重
        console.log([...new Set('ababbc')].join('')) // abc

*  ### **对象的扩展运算符** ###

1.  ### 拷贝对象（等价于Object.assign(),所以第一级对象为深拷贝，以后级别为浅拷贝） ###
    
        let a1 = { a: 1, b: 2 };
        // Object.assign
        let a2 = Object.assign({}, a1);// { a: 1, b: 2 }
        // 扩展运算符
        let a2 = { ...a1 }; // { a: 1, b: 2 }
2.  ### **合并对象(多个对象有同名属性，则后面的会覆盖前面的)** ###
    
        let a1 = { a: 1, b: 2 };
        let a2 = { a: 3, c: 4 };
        let a3 = { ...a1, ...a2} // {a: 3, b: 2, c: 4}
3.  ### **和解构赋值结合生成对象（**扩展运算符参数必须在最后一位**）** ###
    
        let { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
        console.log(a) // 1
        console.log(b) // 2
        console.log(z) // { c: 3, d: 4 }
4.  ### 根据条件添加对象属性 ###
    
        let a = (data) => {
          return {
            x: 'haha',
            y: 'hehe',
            ...(data ? { z : 'xixi' } : null)
          }
        }
        
        let m = a(true);
        console.log(m); // 输出 { x: "haha", y: "hehe", z: "xixi" }
        
        let n = a(false);
        console.log(n); // 输出 { x: "haha", y: "hehe" }