ES6扩展运算符的妙用

多亏了ES6和像Babel这样的转换器，书写JavaScript代码已经变得难以想象的有活力，从新的语法到可以自定义解析的JSX。我是展开运算符的一位铁粉，三个点...将会改变你使用JS完成任务的方式。以下是我在JS中最喜欢的展开运算符的用法！

不使用Apply的函数调用

我们经常使用Function.prototype.apply，传递一个数组作为参数，使用数组中存放的一组参数调用一个函数。

  1. function doStuff (x, y, z) { }
  2. var args = [0, 1, 2];
  4. // 调用函数，传递args参数
  5. doStuff.apply(null, args);

采用展开用算符我们能够在避免使用apply的同时，轻易的调用函数。只需在数组前加上展开运算符即可。

  1. doStuff(...args);

这段代码变得更短，更清晰，并且不需要使用多余的null

合并数组

  1. arr1.push(...arr2) // 将arr2 追加到数组的末尾
  2. arr1.unshift(...arr2) // 将arr2 追加到数组的开头

如果你想要整合两个数组，并且想把某个数组放在另一个数组的任意特定位置上，你可以这么做：

  1. var arr1 = ['two', 'three'];
  2. var arr2 = ['one', ...arr1, 'four', 'five'];
  3. // ["one", "two", "three", "four", "five"]

这是一种比其他方式更短的语句！

拷贝数组

得到一份数组的拷贝是很常见的任务，过去我们使用Array.prototype.slice来做，但现在我们可以使用展开运算符：

  1. var arr = [1,2,3];
  2. var arr2 = [...arr]; // 和arr.slice()差不多
  3. arr2.push(4)

记住：数组中的对象依然是引用值，所以不是任何东西都“拷贝”过去了。

将arguments或者NodeList转换为Array

像拷贝数组一样，我们常常使用Array.Prototype.slice来将NodeList和arguments这种类数组对象转换为真正的数组。但是现在我们能够用展开运算符轻易的实现这项任务：

  1. [...document.querySelectorAll('div')]

使用此法，你甚至可以像数组一样获取参数。

  1. var myFn = function(...args) {
  2. // ...
  3. }

别忘了你也能用Array.from达成相同的目的！

使用Math函数

  1. let numbers = [9, 4, 7, 1];
  2. Math.min(...numbers); // 1

Math对象的一系列的方法，正是展开运算符作为唯一参数传递给函数的完美例子。

单层解构

  1. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  2. console.log(x); // 1
  3. console.log(y); // 2
  4. console.log(z); // { a: 3, b: 4 }

解构嵌套

  1. const obj = { a: 0, b: 1, c: { d: 2, e: 3 } };
  2. const { c: { d, e } } = obj;
  3. // d e => 2 3