Advertisement

ES6 扩展运算符 三个点(...)。

阅读量:
复制代码
    export default withRouter((props) => <DigitalMuseum {...props} />);

1 含义
扩展运算符(spread)是三个点符号(…)。它类似于rest参数操作的逆过程,在将数组转换为可变参数序列时发挥了重要作用。

复制代码
  console.log(...[1, 2, 3])  
    2.  // 1 2 3  
    3.  console.log(1, ...[2, 3, 4], 5)  
    4.  // 1 2 3 4 5  
    5.  [...document.querySelectorAll('div')]  
    6.  // [<div>, <div>, <div>]

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

复制代码
  function push(array, ...items) {  
    2.  array.push(...items);  
    3.  }  
    4.  function add(x, y) {  
    5.  return x + y;  
    6.  }  
    7.  var numbers = [4, 38];  
    8.  add(...numbers) // 42

在代码中可以看到:array的push方法(push)以及add方法(add)这两行代码都是函数调用。这些操作都采用了扩展运算符(spread operator)。该运算符的作用是将一个数组转换为参数列表。

扩展运算符与正常的函数参数可以结合使用,非常灵活。

复制代码
  function f(v, w, x, y, z) { }  
    2.  var args = [0, 1];  
    3.  f(-1, ...args, 2, ...[3]);

2 替代数组的 apply 方法

由于其能够展开展开运算以处理数组数据而被广泛采用

复制代码
  // ES5 的写法  
    2.  function f(x, y, z) {  
    3.  // ...  
    4.  }  
    5.  var args = [0, 1, 2];  
    6.  f.apply(null, args);  
    7.  // ES6 的写法  
    8.  function f(x, y, z) {  
    9.  // ...  
    10.  }  
    11.  var args = [0, 1, 2];  
    12.  f(...args);

以下是一个实例:通过避免调用apply函数,并直接使用Math.max方法来代替,并非只是一种替代手段而是优化了代码结构。

复制代码
  // ES5 的写法  
    2.  Math.max.apply(null, [14, 3, 77])  
    3.  // ES6 的写法  
    4.  Math.max(...[14, 3, 77])  
    5.  //  等同于  
    6.  Math.max(14, 3, 77);

上面代码表明:JavaScript本身并未提供专门计算数组最大值的功能;因此不得不调用Math.max函数,并将数组转换为多个参数序列以获取其最大值。借助新增的扩展运算符操作后,则可以直接调用Math.max即可完成计算过程。

另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

复制代码
  // ES5 的写法  
    2.  var arr1 = [0, 1, 2];  
    3.  var arr2 = [3, 4, 5];  
    4.  Array.prototype.push.apply(arr1, arr2);  
    5.  // ES6 的写法  
    6.  var arr1 = [0, 1, 2];  
    7.  var arr2 = [3, 4, 5];  
    8.  arr1.push(...arr2);

在ES5语法中,在push()方法的参数不能接受Array类型的场景下

复制代码
  // ES5  
    2.  new (Date.bind.apply(Date, [null, 2020, 3, 23]))  
    3.  // ES6  
    4.  new Date(...[2020, 3, 23]);

3 扩展运算符的应用
( 1 )合并数组

扩展运算符提供了数组合并的新写法。

复制代码
  // ES5  
    2.  [1, 2].concat(more)  
    3.  // ES6  
    4.  [1, 2, ...more]  
    5.  var arr1 = ['a', 'b'];  
    6.  var arr2 = ['c'];  
    7.  var arr3 = ['d', 'e'];  
    8.  // ES5 的合并数组  
    9.  arr1.concat(arr2, arr3);  
    10.  // [ 'a', 'b', 'c', 'd', 'e' ]  
    11.  // ES6 的合并数组  
    12.  [...arr1, ...arr2, ...arr3]  
    13.  // [ 'a', 'b', 'c', 'd', 'e' ]

( 2 )与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组。

复制代码
  // ES5  
    2.  a = list[0], rest = list.slice(1)  
    3.  // ES6  
    4.  [a, ...rest] = list  
    5.  下面是另外一些例子。  
    6.  const [first, ...rest] = [1, 2, 3, 4, 5];  
    7.  first // 1  
    8.  rest // [2, 3, 4, 5]  
    9.  const [first, ...rest] = [];  
    10.  first // undefined  
    11.  rest // []:  
    12.  const [first, ...rest] = ["foo"];  
    13.  first // "foo"  
    14.  rest // []

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

复制代码
  const [...butLast, last] = [1, 2, 3, 4, 5];  
    2.  //  报错  
    3.  const [first, ...middle, last] = [1, 2, 3, 4, 5];  
    4.  //  报错

( 3 )函数的返回值

JavaScript 的函数仅限于返回一个值;若要返回多个值,则必须以数组或对象的形式进行处理。扩展运算符为解决这一问题提供了一种灵活的方法。

复制代码
  var dateFields = readDateFields(database);  
    2.  var d = new Date(...dateFields);

该代码首先从数据库中获取了一行数据记录,并借助扩展运算符进行处理后,可以直接传递给Date函数用于构造。

( 4 )字符串

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

复制代码
  [...'hello']  
    2.  // [ "h", "e", "l", "l", "o" ]

上面的写法,有一个重要的好处,那就是能够正确识别 32 位的 Unicode 字符。

复制代码
  'x\uD83D\uDE80y'.length // 4  
    2.  [...'x\uD83D\uDE80y'].length // 3

在上述代码中第一种实现方式下,JavaScript在处理32位Unicode字符时会被识别为占用两个字符的位置;而采用扩展运算符就不会出现该问题。因此为了正确返回字符串长度,在编写相关函数时应当避免使用这种直接的方法;例如可以这样实现:function getStringLength(str) { return str.length; }

复制代码
  function length(str) {  
    2.  return [...str].length;  
    3.  }  
    4.  length('x\uD83D\uDE80y') // 3

上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。

( 5 )实现了 Iterator 接口的对象

任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

复制代码
  var nodeList = document.querySelectorAll('div');  
    2.  var array = [...nodeList];

在上述代码中,在使用querySelectorAll方法时会返回一个NodeList对象。由于NodeList并不是标准的Array类型而是一种类似Array的对象,在这种情况下可以通过使用扩展运算符使其转换为真实的Array形式。其原因在于NodeList对象本身实现了Iterator接口

对于未配置Iterator接口的相似数组对象而言,在使用扩展运算符时将无法将其转换为真正的数组。

复制代码
  let arrayLike = {  
    2.  '0': 'a',  
    3.  '1': 'b',  
    4.  '2': 'c',  
    5.  length: 3  
    6.  };  
    7.  // TypeError: Cannot spread non-iterable object.  
    8.  let arr = [...arrayLike];  
    1.  let arrayLike = {  
    2.  '0': 'a',  
    3.  '1': 'b',  
    4.  '2': 'c',  
    5.  length: 3  
    6.  };  
    7.  // TypeError: Cannot spread non-iterable object.  
    8.  let arr = [...arrayLike];

在上述代码中,在代码中arrayLike是一个类似于数组的对象但不支持Iterator接口。如果不进行处理,则会导致报错错误。建议采用Array.from方法将arrayLike转换为标准的数组对象。

( 6 ) Map 和 Set 结构, Generator 函数

扩展运算符基于数据结构的Iterator接口进行操作。该运算符被设计为适用于所有具备Iterator接口的对象。例如,在Map类别中就可以实现这一功能。

复制代码
  let map = new Map([  
    2.  [1, 'one'],  
    3.  [2, 'two'],  
    4.  [3, 'three'],  
    5.  ]);  
    6.  let arr = [...map.keys()]; // [1, 2, 3]

上面代码中,在变量go处定义了一个生成器函数;该函数执行后会返回一个遍历器对象;对这个遍历器对象应用扩展运算符的话,则会将内部收集到的值转换成数组形式。若尝试在不具备迭代器接口的对象上应用扩展运算符,则会导致错误出现。

复制代码
  var obj = {a: 1, b: 2};  
    2.  let arr = [...obj]; // TypeError: Cannot spread non-iterable object

全部评论 (0)

还没有任何评论哟~