《ES6标准入门》数组的扩展

Posted 2021-06-08 心有明珠，山河明媚

数组的扩展

1. 扩展运算符

1.1 含义

• 扩展运算符是三个点（...），将一个数组转为用逗号分隔的参数序列。

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

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

    [...document.querySelectorAll(\'div\')]
    // [<div>, <div>, <div>]

• 该运算符主要用于函数调用。

    function push(array, ...items) {
        array.push(...items)
        //使用了rest和...
    }

    function add(x, y) {
        return x + y
    }

    const numbers = [4, 38];
    add(...numbers) // 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们都使用了扩展运算符。

• 注意，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错。

    (...[1, 2])
    // Uncaught SyntaxError: Unexpected number

    console.log((...[1, 2]))
    // Uncaught SyntaxError: Unexpected number

    console.log(...[1, 2])
    // 1 2

1.2 替代函数的 apply 方法

• 由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

    // ES5 的写法
    Math.max.apply(null, [14, 3, 77])

    // ES6 的写法
    Math.max(...[14, 3, 77])

    // 等同于
    Math.max(14, 3, 77)

// 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)

上面代码的 ES5 写法中，push方法的参数不能是数组，所以只好通过apply方法变通使用push方法。有了扩展运算符，就可以直接将数组传入push方法。

1.3 扩展运算符的应用

1. 复制数组

    const a1 = [1, 2]
    // 写法一
    const a2 = [...a1]
    // 写法二(解构赋值)，相当于定义了a2
    const [...a2] = a1

2. 合并数组

    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\' ]

不过，这两种方法都是浅拷贝，使用的时候需要注意。它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值(修改原来的)，会同步反映到新数组。

3. 与解构赋值相结合

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

    const [first, ...rest] = [];
    first // undefined
    rest  // []

    const [first, ...rest] = ["foo"];
    first  // "foo"
    rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

4. 字符串
   扩展运算符还可以将字符串转为真正的数组。

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

5. 实现了 Iterator 接口的对象
6. Map 和 Set 结构，Generator 函数

学识浅薄，如有错误，恳请斧正，在下不胜感激。