扩展运算符/展开运算符

语法

函数调用

myFunction(...iterableObj);

字面量数组构造或字符串

myFunction(...iterableObj);

构造字面量对象时,进行克隆或者属性拷贝

let objClone = { ...obj };

作用

扩展运算符允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

对象扩展运算符

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

对象拷贝

    let obj = {                         
        'a': 1,                       
        'b': 2                        
    };                                     
    let newObj = {...obj};              
    console.log(newObj); // {'a':1,'b':2}

运算符后可以跟自定义属性

    let obj = {
        'a': 1,
        'b': 2
    };                                           
    let newObj = {...obj,'c':3};              
    console.log(newObj); // {'a':1,'b':2,'c':3}

如果自定义属性与被扩展的对象同名，则同名属性会被覆盖

    let obj = {                         
        'a': 1,                       
        'b': 2                        
    };                                     
    let newObj = {...obj,'a':3};        
    console.log(newObj); // {'a':3,'b':2}

扩展运算符对对象实例的拷贝属于浅拷贝（拷贝对象的引用）

    let obj = {                                     
        'a': 1,                                   
        'b': 2,                                   
        'c':{                                      
            d:3                                
        }                                          
    };                                                 
    let newObj = {...obj};                          
    obj.c.d = 4;                                     
    console.log(newObj); // {'a':1,'b':2,'c':{'d':4}}

对象结构

    let {x,y,...z} = {         
        x: 1,                
        y: 2,                
        a: 3,                
        b: 4                 
    }                             
    console.log(x); // 1        
    console.log(y); // 2        
    console.log(z); // {a:3,b:4}

数组扩展运算符

数组拷贝

    let arr1 = [1,2,3];         
    let arr2 = [...arr1];       
    console.log(arr2); // [1,2,3]

将字符串转换为数组

    console.log([..."abcd"]); 
    // ['a','b','c','d']

将伪数组转换为数组

    function foo(){                           
        let args = [...arguments];      
        console.log(args); // [1,2,3,4,5]
    }                                          
    foo(1,2,3,4,5);                            

代替apply

    // ES5写法                         
    Math.max.apply(null,[1,2,3]); // 3 
    // ES6                              
    Math.max(...[1,2,3]); // 3         

数组分割

    let [a,...b] = [1,2,3,4]; 
    console.log(b); // [2,3,4] 

数组合并

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

变量交换

    let x = 1;             
    let y = 2;             
    [x,y] = [y,x];          
    console.log(x,y); // 2,1

与解构赋值结合

    let [a,b,c,d,e] = "hello";
    console.log(a); //"h"       
    console.log(b); //"e"       
    console.log(c); //"l"       
    console.log(d); //"l"       
    console.log(e); //"o"       

实例

多维数组扁平化

    let arr = [1, [2, [3, [4, 5]]]];    
    function flatArr(arr) {                  
        let isArr = (item) => {       
            return Array.isArray(item)
        }                                  
        while (arr.some(isArr)) {        
            arr = [].concat(...arr)  
        }                                  
        return arr;                       
    }                                          
    console.log(flatArr(arr)); // [1,2,3,4,5]