数组的拓展运算符

  • A+
所属分类:ES 6 JavaScript Web

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

一.拓展运算符

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>]
    
  • ② 主要使用场景是函数调用
    //array.push(...items)和add(...numbers)这两行都将数组,变为参数序列
    function push(array, ...items) {
      array.push(...items);
    }
    
    function add(x, y) {
      return x + y;
    }
    
    const numbers = [4, 38];
    add(...numbers) // 42
    
  • ③ 与正常参数联合使用
    function f(v, w, x, y, z) { }
    const args = [0, 1];
    f(-1, ...args, 2, ...[3]);
    

二.扩展运算符的应用

1.替代函数的 apply 方法

  • 使用拓展运算符展开数组,不需要使用apply方法将数组站位函数参数了。
    // ES5 的写法
    function f(x, y, z) {
      // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6的写法
    function f(x, y, z) {
      // ...
    }
    let args = [0, 1, 2];
    f(...args);
    
  • 更多范例一,使用Math.max获取数组最大元素。
    // ES5 的写法
    Math.max.apply(null, [14, 3, 77])
    
    // ES6 的写法
    Math.max(...[14, 3, 77])
    
    // 等同于
    Math.max(14, 3, 77);
    
  • 更多范例二,通过push函数,将一个数组添加到另一个数组的尾部。以及创建Date对象
    // 一
    // 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
    new (Date.bind.apply(Date, [null, 2015, 1, 1]))
    // ES6
    new Date(...[2015, 1, 1]);
    

2.复制数组

  • ES5中使用变通方式复制数组
    const a1 = [1, 2];
    const a2 = a1.concat();
    
    a2[0] = 2;
    a1 // [1, 2]
    
  • ES6中复制数组的简便方式
    const a1 = [1, 2];
    // 写法一
    const a2 = [...a1];
    // 写法二
    const [...a2] = a1;
    

3.合并数组

  • 合并数组,下面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' ]
    

4.与解构赋值结合

  • 扩展运算符可以与解构赋值结合起来,用于生成数组。解构赋值参数只能在最后一位。
    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   // []
    

5.字符串

  • 扩展运算符还可以将字符串转为真正的字符数组。
    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    
  • 第一种写法,JavaScript 会将四个字节的 Unicode 字符,识别为 2 个字符,采用扩展运算符就没有这个问题。
    'x\uD83D\uDE80y'.length // 4
    [...'x\uD83D\uDE80y'].length // 3
    

6.将实现了 Iterator 接口的对象转换为数组

  • 任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。
    let nodeList = document.querySelectorAll('div');
    let array = [...nodeList];
    
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: