欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6...扩展符的使用讲解

程序员文章站 2022-05-06 12:34:37
一、将一个数组转为用逗号分隔的参数序列。(若数组为空不产生任何效果)     console.log(1, ...[2, 3, 4], 5)     ...

一、将一个数组转为用逗号分隔的参数序列。(若数组为空不产生任何效果)

    console.log(1, ...[2, 3, 4], 5)     // 1 2 3 4 5

    [...document.queryselectorall('p')]     // [<p>, <p>, <p>]

二、复制数组(a2复制a1,这种方法之后再改变a2也不会影响到a1)

    const a1 = [1, 2];

        // 写法一

    const a2 = [...a1];

        // 写法二

    const [...a2] = a1;

三、合并数组(不过,这两种方法都是浅拷贝)

    const arr1 = ['a', 'b'];

    const arr2 = ['c'];

    const arr3 = ['d', 'e'];

        // es5 的合并数组

    arr1.concat(arr2, arr3);  // [ 'a', 'b', 'c', 'd', 'e' ]

        // es6 的合并数组

    [...arr1, ...arr2, ...arr3]    // [ 'a', 'b', 'c', 'd', 'e' ]

四、与解构赋值结合(注意:扩展符项必须放在最后一位)

    ① const [first, ...rest] = [1, 2, 3, 4, 5];

        first // 1

        rest  // [2, 3, 4, 5]

    ② const [first, ...rest] = [];

        first // undefined

        rest  // []

五、可以将字符串转为真正的数组

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

六、map 和 set 结构,generator 函数

    ①扩展运算符内部调用的是数据结构的 iterator 接口,因此只要具有 iterator 接口的对象,都可以使用扩展运算符,比如     map结构。

    let map = new map([[1, 'one'],[2, 'two'],[3, 'three']]);

    let arr = [...map.keys()];     // [1, 2, 3]

    ②generator 函数

    const go = function*(){

          yield 1;

          yield 2;

          yield 3;

     };

[...go()] // [1, 2, 3]