如何使用 JavaScript 的扩展运算符 / 三个点

Question

JavaScript 的 spread 操作符 ... 是一种从数组、对象或任何您可以迭代到函数或变量赋值的东西传递多个值的简便方法。当您想要组合两个或多个阵列时，它尤其闪耀。... 运算符提供了一种比使用更直观的方式来组合多个数组 push()、splice() 或者 concat()：

const array1 = ['a', 'b'];
const array2 = ['c', 'd'];
const array3 = [...array1, ...array2, 'e', 'f'];
array3; // ['a','b','c','d','e','f']

注意： 避免使用 ... 与多维数组。修改这种数组可能会导致如下所示的问题：

let arr1 = [[1],[2],[3]];
let arr2 = [...arr1];
arr2.shift().shift();
arr2; // [[2], [3]]
arr1; // [[], [2], [3]]

函数传值

展开运算符还允许您调用一个函数，将数组的内容作为参数，类似于 apply()，它按顺序将可迭代值的参数传递给函数，如果您的参数超出预期，它不会产生任何问题。

function test(arg1,arg2) {
  return arg1 + ' ' + arg2;
}
const args = ['Hello', 'World'];
test(...args); // Hello World

对象复制

数组的相同用例也适用于对象，只要对象中有多个属性即可。 扩展运算符启用的另一个功能是 浅克隆对象。 本质上，对于嵌套对象，对副本所做的任何更改都会反映到原始对象上。

const obj = { answer: 42 };
// The `Object.assign()` function is a common way to shallow clone an object
const copy = Object.assign({}, obj);

++copy.answer; // 43
obj.answer; // 42, did not change because `copy` is a copy of `obj`
const obj = { name: { first: 'Jean-Luc', last: 'Picard' } };
const copy = Object.assign({}, obj);

copy.name.first = 'Johnny';
obj.name.first; // 'Johnny', `name` was **not** cloned