• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 5小时前 4次浏览

数组的扩展

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标准入门》数组的扩展
喜欢 (0)