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 = [];

开始练习