如何使用展开运算符 (...)

学习如何在 JavaScript 中使用三点运算符 (...)，也称为展开运算符。

展开运算符（spread operator）

JavaScript 的展开运算符 (...) 可以将一个可迭代的对象（如数组）扩展为更多的元素。

这允许我们快速地将现有数组的全部或部分复制到另一个数组中：

实例

使用 JavaScript 中的展开运算符来合并两个数组

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

亲自试一试

展开运算符经常用于从数组中提取所需的部分：

实例

将 numbers 数组的第一项和第二项分配给变量，并将剩余的部分放入另一个数组中：

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

亲自试一试

我们也可以在对象上使用展开运算符：

实例

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021,
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

亲自试一试

请注意，不匹配的属性被合并了，但是匹配的属性 color 被最后传入的对象 updateMyVehicle 覆盖了。最终的颜色现在是黄色。

相关页面

教程：JavaScript ES6