本文介绍了ES6中的…操作符的使用场景和使用方法。本文参考自Joy Warugu的《Javascript’s three dots ( … ): Spread vs rest operators》。

ES6 …操作符

ES6推出的 … 操作符，在不同的使用场景（context）下，会有不同的作用效果。

用途1

作为“剩余参数”（rest parameter）的替代物。在调用函数并传入参数时，会把剩余的参数收集起来，并加入到一个数组中。

// 例1
function add(...args) {
  let result = 0;

  for (let arg of args) result += arg;

  return result
}

add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15

// 例2
function xyz(x, y, ...z) {
  console.log(x, ' ', y); // hey hello

  console.log(z); // ["wassup", "goodmorning", "hi", "howdy"]
  console.log(z[0]); // wassup
  console.log(z.length); // 4
}

xyz("hey", "hello", "wassup", "goodmorning", "hi", "howdy")

应用场景：代替arguments。

arguments有2个缺点：

  1. arguments只是“伪数组”，它不是真正的数组，只有数组的“索引”、“length”的特性，而没有其他数组应该有的方法（find、filter、map等）。

  2. 在箭头函数中不能使用arguments，因为箭头函数中没有它们自己的this，因此也不存在arguments对象。

...操作符会产生1个数组，因此拥有数组所拥有的所有方法（find、filter、map等）。

用途2

作为“扩展操作符”（spread operator）。用来把可迭代（iterable）的类型（array、string等）中的进行扩展，扩展成为单个元素。

// 例1：把一个数组中的全部元素，添加到一个已经存在的数组中
const arr = ["Joy", "Wangari", "Warugu"];
const newArr1 = ["joykare", ...arr]; // ["joykare", "Joy", "Wangari", "Warugu"]
const newArr2 = [...arr, "joykare"]; // ["Joy", "Wangari", "Warugu", "joykare"]

// 例2：复制数组
// 把arr中的内容，拷贝到arr2中。然后，当我们对arr2进行任何改变或者操作时，都不会对原来的arr产生任何的影响。
// 注意，若数组中元素是对象，那么拷贝的时候只会拷贝对象的引用（指针）。因此若修改拷贝出来的数组中的对象中的某个属性，会影响到原来的数组。
const arr = [1, 2, 3];
const arr2 = [...arr];  // [1, 2, 3]
arr2.push(4); // arr2 == [1, 2, 3, 4]
arr1 // arr1 == [1, 2, 3]

// 例3：将数组的元素作为单独的参数传递给函数
function add(a, b, c) {
  return a + b + c ;
}
const args = [1, 2, 3];
add(...args); // 6