解构赋值是什么_如何从对象中提取数据【教程】_网络技术

发布时间 - 2026-01-30 00:00:00 点击率：次

解构赋值是ES6引入的语法糖，通过{ name, age }从对象提取属性值，要求左右结构匹配、左侧必须为{}、支持重命名和默认值，嵌套解构需逐层设默认空对象防错。

它不是新函数，也不是库，而是 JavaScript（ES6 起）原生支持的语法糖：用 { name, age } 这种写法，从对象里一次性把值拎出来，省得反复写 obj.name、obj.age。本质是“模式匹配”——左边的结构要和右边对象的属性名对得上。

遇到 user.profile.address.city 这种三级结构，别一层层判空再解构。用嵌套解构 + 默认值更稳：

const { profile: { address: { city = '未知' } = {} } = {} } = user;

这行代码的关键点：

每一层都加了默认空对象 = {}，防止中间某层为 undefined 导致报错
最内层用 city = '未知' 提供兜底值
顺序不能乱：profile 必须先解构，才能继续解构它的 address
注意 profile: { ... } 中的 profile 是“模式”，不是变量名；若你还想保留 profile 对象本身，得额外写 profile 在左边，如 { profile, profile: { address: { city } } }

在 TypeScript 或强校验场景下，光写 function fn({ url, method }) 很危险——如果调用方传了个没 url 的对象，运行时就 undefined 了。正确做法：

加默认值：function fn({ url = '/', method = 'GET' } = {}) {...}，等号
右边的 = {} 防止传 undefined 直接崩
TypeScript 用户务必补接口或类型注解，否则解构变量无类型提示：function fn({ url, method }: { url: string; method: string })
避免在解构里做复杂计算或副作用，比如 { data: fetchData() } —— 解构只该干“取值”这一件事

如果你先写了 let name, age;，后面想用解构赋值，直接写 { name, age } = user; 会报错：SyntaxError: Unexpected token。因为 JS 把开头的 { 当成了代码块，不是解构语法。

修复方式只有一种：加括号

({ name, age } = user);

嵌套深、属性可能缺失、变量已声明却没括号——这三个地方，90% 的解构相关报错都出在这儿。写的时候多看一眼左边是不是 {}、右边有没有可能是 null、变量到底声明了没。