[!info] related notes

• 所属 MOC: ES6 新特性 MOC, ECMAScript MOC
• 前置概念: ECMAScript语法基础
• 并列概念: rest 参数和 spread 运算符, JavaScript 函数总览

解构赋值

一句话定义

解构赋值是把数组或对象的结构拆开，直接把需要的值绑定到变量上。

核心内容

数组解构

const arr = [1, 2, 3]
const [a, b, c] = arr

• 按位置匹配
• 可以跳过某些位置
• 可以设置默认值

对象解构

const user = { name: 'Tom', age: 18 }
const { name, age } = user

• 按属性名匹配，不按顺序
• 可以重命名
• 可以设置默认值

函数参数解构

function printUser({ name, age }) {
  console.log(name, age)
}

这在处理配置对象、组件 props 和 API 返回值时非常常见。

边界与易混淆点

• 解构是按模式匹配，不是“自动取同名变量”
• 对象解构按属性名匹配，数组解构按顺序匹配
• 右侧是 null / undefined 时会报错，常配合默认值使用
• 解构后如果再把方法拿出来单独调用，this 可能丢失

最短记忆方式

• 数组解构看顺序
• 对象解构看名字
• 参数解构看可读性