当前位置：首页 > news >正文

【JavaScript】解构

news 2025/6/30 21:56:20

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

数组解构

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

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

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

示例：

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

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

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]

对象解构

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

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

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

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

const person = {name: "John",age: 30,city: "New York"
};const { name: personName, age: personAge } = person;
console.log(personName); // 输出 "John"
console.log(personAge); // 输出 30