美文网首页工作生活
ES6扩展运算符...

ES6扩展运算符...

作者: easy_mark | 来源:发表于2019-07-01 17:27 被阅读0次

    数组的扩展运算符应用
    1.替代函数的apply方法

    // ES5 的写法
    Math.max.apply(null, [14, 3, 77])
    
    // ES6 的写法
    Math.max(...[14, 3, 77])
    
    // 等同于
    Math.max(14, 3, 77);
    

    另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

    // ES5的 写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    
    // ES6 的写法
    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];
    arr1.push(...arr2);
    

    2.复制合并数组(浅拷贝,使用需注意数组是否含有引用类型)
    ES5 复制数组。

    const a1 = [1, 2];
    const a2 = a1.concat();
    
    a2[0] = 2;
    a1 // [1, 2]
    

    ES6扩展运算符

    const a1 = [1, 2];
    // 写法一
    const a2 = [...a1];
    // 写法二
    const [...a2] = a1;
    

    合并数组

    const a1 = [{ foo: 1 }];
    const a2 = [{ bar: 2 }];
    
    const a3 = a1.concat(a2);
    const a4 = [...a1, ...a2];
    
    a3[0] === a1[0] // true
    a4[0] === a1[0] // true
    

    3.与解构赋值结合使用

    // ES5
    a = list[0], rest = list.slice(1)
    // ES6
    [a, ...rest] = list
    

    也可以解构函数内部的arguments类数组

    function a(x,y,z){
        let [a,...rest] = arguments;
        console.log(a,rest)
    }
    a(1,2,3)
    //1, [2,3]
    

    4.将字符串转为数组

    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    

    5.实现了 Iterator 接口的对象
    任何定义了iterator的数据结构都可以使用扩展运算符

    相关文章

      网友评论

        本文标题:ES6扩展运算符...

        本文链接:https://www.haomeiwen.com/subject/lfkncctx.html