解构赋值
解构赋值是 JavaScript 中按模式把 object 属性或 array 元素放入变量的语法，它不会修改原 object 或 array。本课始终使用这个订单：
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
基础 object 解构
{} 中的名称会从右侧值中选择同名属性，并创建两个新常量。
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
输出依次为 lida 和 tea。这是读取 order.guest 与 order.drink 的简写，不会从 order 删除任何属性。
重命名与默认值
property: variable 可以指定不同的变量名。只有属性值为 undefined 时，= 后的默认值才会生效。
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer 得到 lida。由于 size 不存在，变量 size 得到 regular。这个模式不会创建名为 guest 的变量。
读取嵌套属性
嵌套模式会沿着 object 的结构匹配。内部的 { city } 从 order.address 读取 city。
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
输出为 rasht，但不会创建 address 变量。若 address 缺失或为 undefined，继续解构 city 可能抛出错误。不能在这个解构模式内部使用 optional chaining；请先检查或规范化该值。
array 解构
方括号 [] 按位置匹配元素。第一个变量对应索引 0，第二个变量对应索引 1。
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
输出依次为 mint 和 lemon。变量名可以自定，但值由位置决定；order.extras 仍保留两个元素。
在函数参数中解构
函数可以直接在参数列表中提取收到的 object 属性。下面的函数只需要 guest 和 drink。
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
调用结果为 lida ordered tea。参数模式会在调用时执行；如果函数没有特别处理，传入 null 或 undefined 会导致错误。
完整页面示例
这个页面结合 object、array 和参数解构，在页面中显示订单摘要。
<!doctype html>
<html lang="zh">
<head><meta charset="utf-8"><title>JavaScript 解构赋值</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
页面可见输出恰好是 lida / tea / mint。函数只读取所需数据，不会修改 order。
include_try
把 drink 重命名为 beverage，并为缺失的 table 属性添加默认值。再创建一个没有 address 的订单，在使用嵌套模式前先检查它。
mistakes
不要混淆属性名与重命名后的变量。默认值不会替换 null，嵌套 object 也不一定存在。{} 匹配属性，[] 匹配 array 位置，解构不会修改数据源。Rest 与 spread 将在下一课 spread-rest 中学习。
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部