【JavaScript】解构

解构（Destructuring）是 JavaScript 中一种强大的语法特性，它允许你从数组或对象中提取值并赋值给变量，使代码更加简洁和易读。JavaScript 中有两种主要的解构语法：数组解构和对象解构。

数组解构

数组解构用于从数组中提取值并将它们分配给变量。语法如下：

const [variable1, variable2, ...rest] = array;
1

• variable1, variable2 是要赋值的变量名。
• array 是源数组。
• rest（可选）是一个用于收集剩余值的数组。

示例：

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

const [first, second] = numbers;
console.log(first); // 输出 1
console.log(second); // 输出 2
1
2
3
4
5

你还可以使用剩余操作符 ... 来收集数组中的剩余值：

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

const [first, second, ...rest] = numbers;
console.log(first); // 输出 1
console.log(second); // 输出 2
console.log(rest); // 输出 [3, 4, 5]
1
2
3
4
5
6

对象解构

对象解构用于从对象中提取属性值并将它们分配给变量。语法如下：

const { property1, property2, ...rest } = object;
1

• property1, property2 是要赋值的属性名，它们必须与对象中的属性名相匹配。
• object 是源对象。
• rest（可选）是一个用于收集其余属性的对象。

示例：

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const { name, age } = person;
console.log(name); // 输出 "John"
console.log(age); // 输出 30
1
2
3
4
5
6
7
8
9

你也可以使用别名来给属性起不同的变量名：

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const { name: personName, age: personAge } = person;
console.log(personName); // 输出 "John"
console.log(personAge); // 输出 30
1
2
3
4
5
6
7
8
9

这是解构的基本概念，它可以帮助你更轻松地访问和使用数组和对象中的数据。解构在处理函数参数、处理复杂的数据结构、从函数返回多个值等情况下都非常有用。