ES6中的(...)扩展运算符

清疚 2022-05-25 10:51 243阅读 0赞

很简单啊，我就是想一下啊啊啊啊啊啊啊．

--------------------

## 扩展运算符（spread）．．． ##

１．（．．．）相当于rest参数的逆运算，将一个数组转为用逗号分割的参数序列．

２．作用：

>  *  用于函数调用．
>  *  替代函数方法apply：因为扩展运算符可以展开数组，所以不需要再使用apply方法，将数组转为函数的参数．
>  *  用于数组字面量

eg１：

//将items的数组转换为参数序列，再进行push操作．
    function push(array, ...items) { 
        array.push(...items);
    }

eg2：扩展运算符后面还可以放置表达式

const arr = [...(x > 0) ? ['a'] : [], 'b'];

eg3：代替函数的apply方法：因为扩展运算符可以展开数组，所以不需要用apply方法，将数组转为函数的参数．

let args=[0,1,2];
    function fun(x,y,z) {
        //...
    }
    //es5
    fun.apply(null,args);
    //es6
    fun(...args);

//es5
    Math.max.apply(null,[14,3,77]);
    //es6
    Math.max(...[14,3,77])

３．应用

*  复制数组：数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组．

const a1=[1,2];
    //第一种
    const a2=[...a1];
    //第二种
    const [...a2]=a1;

*  合并数组

let arr1=[1,2,3];
    let arr2=["a","b"];
    let arr3=["weiqiujuan","liuxiaotian"];
    //es5
    arr1.concat(arr2,arr3);
    //es6
    [...arr1,...arr2,...arr3];

*  与解构赋值结合：注（只能将扩展运算符用于数组赋值的参数的最后一位，否则报错）

//es5
    a = list[0], rest = list.slice(1);
    //es6
    [a, ...rest] = list;
    
    const [first, ...rest] = [];
    first // undefined
    rest  // []

*  将字符串转换为真正的数组(：有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符。)JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题

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

*  实现来Iterator接口的对象（任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。）  
    
    
    对于没有部署Iterator接口的，可以使用`Arrayfrom`将其转化为真正的数组．

let nodeList=document.querySelectorAll("div");//返回的是一个对象
    let array=[...nodeList];//将其转换为真正的数组，NodeList对象实现了 Iterator 。

*  Map和Set结构，Generator函数（扩展用算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用它）

map：

let map = new Map([
        [1, 'weiqiujuan'], [2, 'liuxiaotian'], [3, 'liudishizhu'] ]); let arr = [...mao.keys()];//［1,2,3］

Generator：函数运行后，返回一个遍历器对象，所以可以使用

const go=function *() { 
        yield 1;
        yield 2;
        yield 3;
    };
    
    [...go()];//[1,2,3]