React ES6 扩展运算符

扩展运算符

JavaScript扩展操作符（…）允许我们将现有数组或对象的全部或部分快速复制到另一个数组或对象中。

实例

<!DOCTYPE html>
<html>
<body>
<script>
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
document.write(numbersCombined);
</script>
</body>
</html>

运行一下

扩展运算符通常与分解结合使用。

实例

将 numbers 中的第一项和第二项分配给变量，并将其余项放入数组中:

<!DOCTYPE html>
<html>
<body>
<script>
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
document.write("<p>" + one + "</p>");
document.write("<p>" + two + "</p>");
document.write("<p>" + rest + "</p>");
</script>
</body>
</html>

运行一下

我们也可以对对象使用扩展操作符:

实例

组合这两个对象:

<!DOCTYPE html>
<html>
<body>
<script>
const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}
const updateMyVehicle = {
  type: 'car',
  year: 2021,
  color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
console.log(myUpdatedVehicle);
</script>
<p>按 F12 键并在 console 视图中查看结果对象。</p>
</body>
</html>

运行一下

请注意，不匹配的属性被合并，但匹配的属性 color 被传递的最后一个对象 updateMyVehicle 覆盖。现在生成的颜色为黄色。

React ES6 扩展运算符

扩展运算符

实例

实例

实例

分类导航