获得完整访问权限
测验

什么是展开运算符以及如何使用它？

主题
JavaScript

TL;DR

展开运算符，用三个点 (...) 表示，在 JavaScript 中用于将可迭代对象（如数组或字符串）展开为单个元素。它也可以用于展开对象属性。例如，您可以使用它来组合数组、复制数组或将数组元素作为参数传递给函数。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]


const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

什么是展开运算符以及如何使用它？

展开数组

展开运算符可用于将数组的元素展开为单个元素。这对于组合数组或复制数组很有用。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

复制数组

您可以使用展开运算符创建数组的浅拷贝。

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

将数组元素作为函数参数传递

展开运算符可用于将数组的元素作为参数传递给函数。

function sum(a, b, c) {
  return a + b + c;
}


const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

展开对象

展开运算符也可用于展开对象的属性。这对于组合对象或复制对象很有用。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

复制对象

您可以使用展开运算符创建对象的浅拷贝。

const originalObj = { a: 1, b: 2 };
const copyObj = { ...originalObj };
console.log(copyObj); // { a: 1, b: 2 }

使用字符串

扩展运算符也可以用来将字符串扩展成单个字符。

const str = 'hello';
const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

延伸阅读

练习

检验你的理解
测试版
检验你的理解 练习 1/3
检验你的理解 练习 1/3

What does this code log?

const base = [1, 2];
const array = [0, ...base, 3];
const first = { a: 1, b: 2 };
const object = { ...first, b: 4, c: 5 };
console.log(JSON.stringify(array), object.a, object.b, object.c);