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

Posted 心有明珠,山河明媚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《ES6标准入门》数组的扩展相关的知识,希望对你有一定的参考价值。

数组的扩展

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
  1. 合并数组
    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\' ]

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

  1. 与解构赋值相结合
    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   // []

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

  1. 字符串
    扩展运算符还可以将字符串转为真正的数组。
    [...\'hello\']
    // [ "h", "e", "l", "l", "o" ]
  1. 实现了 Iterator 接口的对象
  2. Map 和 Set 结构,Generator 函数

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

以上是关于《ES6标准入门》数组的扩展的主要内容,如果未能解决你的问题,请参考以下文章

ES6标准入门 字符串的扩展

es6+最佳入门实践

1.《ES6标准入门》(阮一峰)--3.变量的解构赋值

ES6 从入门到精通 # 12:数组的扩展方法一

ES6 从入门到精通 # 12:数组的扩展方法一

ES6标准学习: 4数组的扩展