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

解构赋值就是用花括号直接“拆”对象
它不是新函数,也不是库,而是 JavaScript(ES6 起)原生支持的语法糖:用 { name, age } 这种写法,从对象里一次性把值拎出来,省得反复写 obj.name、obj.age。本质是“模式匹配”——左边的结构要和右边对象的属性名对得上。
- 必须是对象字面量形式,即左边一定要用
{},不能用[]或其他 - 变量名默认和属性名一致;不一致时得用
name: userName重命名 - 如果属性不存在,对应变量就是
undefined,不会报错 -
null和undefined不能被解构,否则直接抛TypeError
如何安全地从嵌套对象中取值
遇到 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);
- 仅当变量已声明(
let/const/var)时才需要括号 - 用
const { name, age } = user;就完全没问题,这是最推荐的写法 - 别试图用逗号运算符绕过,比如
({}, { name, age } = user)—— 可读性差且无必要
{}、右边有没有可能是 null、变量到底声明了没。










