React ES6 扩展运算符


价差运算符

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。现在得到的颜色是黄色。


通过练习测试一下

练习:

使用扩展运算符组合以下数组。

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [1, 2, 3];
const arraysCombined = [];

开始练习