解构是现代 JavaScript 中一个虽小却强大的功能，它允许你使用简洁的声明式语法从数组中提取值，并从对象中提取属性。它减少了样板代码，使意图更清晰，并且与现代模式（例如从函数返回多个值、处理 API 响应以及编写简洁的 React 组件）完美兼容。本文将指导你从基础知识到实用模式，使你能够自信而安全地使用解构。
您将学到什么
在本指南结束时，您将了解如何：
使用对象解构从对象中提取值。
使用数组解构从数组中获取值。
添加默认值，这样当数据丢失时您的代码就不会中断。
解构时重命名变量以使其更清晰。
安全地处理嵌套对象。
在函数、循环和实际示例中使用解构。
避免初学者常犯的常见错误。
对象解构（基础知识）
通过对象解构，您可以将对象的属性直接提取到变量中：
const user = { name: 'Wisdom', age: 30 };
const { name, age } = user;
console.log(name); // 'Wisdom'
console.log(age); // 30我们不再编写 user.name 和 user.age，而是将它们放在一行中。
数组解构（基础知识）
数组解构的工作方式相同，但它根据位置提取值：
const colors = ['red', 'green', 'yellow']; const [first, second] = colors; console.log(first); // 'red' console.log(second); // 'green'
如果只需要一些值，则可以跳过位置：
const [ , , third] = colors; console.log(third); // 'yellow'
默认值
有时，某个属性或值可能不存在。使用解构，你可以为其赋予默认值，这样你的代码就不会崩溃。
const settings = { theme: undefined };
const { theme = 'light', fontSize = 16 } = settings;
console.log(theme); // 'light'
console.log(fontSize); // 16对于数组：
const numbers = [1]; const [first = 0, second = 2] = numbers; console.log(first); // 1 console.log(second); // 2
重命名变量
您还可以在解构值时重命名它们：
const person = { fullName: 'Wisdom Udo', code: '007' };
const { fullName: name, code: id } = person;
console.log(name); // 'Wisdom Udo'
console.log(id); // '007'当属性名称很长或者与您想要的名称不匹配时，这很有用。
剩余操作符（获取“剩余”）
您可以提取特定值，然后保留对象或数组的“其余部分”：
const car = { brand: 'Toyota', year: 2020, color: 'blue' };
const { brand, ...otherDetails } = car;
console.log(brand); // 'Toyota'
console.log(otherDetails); // { year: 2020, color: 'blue' }使用数组：
const numbers = [10, 20, 30, 40]; const [first, ...rest] = numbers; console.log(first); // 10 console.log(rest); // [20, 30, 40]
嵌套解构
您可以更深入地从对象内部的对象中提取值：
const user = {profile: {name: 'Wisdom',city: 'Port Harcourt'}};
const { profile: { name, city } } = user;
console.log(name); // 'Wisdom'
console.log(city); // 'Port Harcourt'如果您不确定数据是否存在，请使用默认值以避免错误：
const data = {};
const { profile: { name } = {} } = data;
console.log(name); // undefined (safe)函数中的解构
解构的最佳用途之一是在函数参数中。
function greet({ name = 'Guest', age = 18 } = {}) {
console.log(Hello ${name}, you are ${age} years old.);
}
greet(); // Hello Guest, you are 18 years old.
greet({ name: 'Wisdom', age: 30 }); // Hello Wisdom, you are 30 years old.这使得您的函数在缺少参数时易于阅读且安全。
现实世界的例子
React 组件（props）：
function Button({ label, onClick }) {
return {label};
} 快速交换值：
let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // 2, 1
循环遍历对象数组：
const users = [{ id: 1, name: 'Ada' }, { id: 2, name: 'James' }];
for (const { id, name } of users) {
console.log(id, name);
}应避免的常见错误
解构undefined或null将抛出错误。请务必添加默认值（= {}或= []）。
分配给现有变量时忘记括号：
let x, y;
({ x, y } = { x: 5, y: 10 }); // wrap in ()过度使用解构：只取你需要的部分。过度使用解构会让代码混乱。
结论
解构操作乍一看可能有点棘手，但一旦练习过后，你就会发现代码变得简洁多了。无需再写冗长重复的代码，只需敲几下键盘就能从对象和数组中提取值。
对于初学者来说，掌握解构的最好方法是练习：
options使用解构重写一个接受对象的函数。
从数组中仅提取您需要的值。
尝试解构 API 响应或 JSON 数据。
使用得越多，你就会感觉越自然，很快，解构就会成为你最喜欢的 JavaScript 工具之一。