解构赋值是JavaScript中从数组或对象提取值并赋给变量的简洁语法。对象解构按属性名提取、可重命名和设默认值;数组解构按位置提取、可跳过项或收集剩余元素;函数参数中可直接解构,提升可读性;需注意避免解构null/undefined及作用域问题。

解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的简洁语法,它让代码更清晰、更少冗余。
对象解构:按属性名提取值
不用再写 const name = obj.name 这样的重复代码。只要结构匹配,就能直接把属性值“拆出来”:
- 基础用法:
const { name, age } = person;—— 等价于分别取person.name和person.age - 重命名变量:
const { name: fullName, age: userAge } = person;—— 提取时顺手改名 - 设置默认值:
const { city = 'Unknown' } = person;—— 如果person.city是undefined,就用默认值 - 嵌套解构:
const { address: { zip } } = person;—— 一层层往下钻,不用连写person.address.zip
数组解构:按位置提取元素
适合处理函数返回多个值、参数列表、或快速交换变量等场景:
- 基本提取:
const [first, second] = arr;—— 取索引 0 和 1 的元素 - 跳过某些项:
const [,, third] = arr;—— 用逗号占位,跳过前两个 - 剩余元素:
const [head, ...tail] = arr;——tail是一个新数组,包含除第一个外的所有项 - 交换变量:
[a, b] = [b, a];—— 无需临时变量,一行搞定
解构在函数参数中的实用写法
把解构直接写在形参位置,让函数接口更直观、更易读:
立即学习“Java免费学习笔记(深入)”;
- 接收对象参数:
function greet({ name, greeting = 'Hello' }) { return `${greeting}, ${name}!`; } - 只关心几个字段:
fetchUser({ id, timeout = 5000 })—— 调用时传完整对象,函数内部只解出需要的 - 配合默认参数对象:
function configure({ retries = 3, delay = 100 } = {}) { ... }—— 即使调用时不传参数也不会报错
注意事项和常见坑
解构看着简单,但有些细节容易出错:
- 左边必须是“可解构”的模式,不能是纯变量名(比如
{ x } = obj会报错,要加const或let) - 解构 null 或 undefined 会报错:
const { name } = null;→ TypeError,建议配合可选链或默认值使用 - 对象解构不看顺序,只看属性名;数组解构严格按索引位置,顺序很重要
- 解构出来的变量不会自动变成全局变量,仍受块级作用域限制
基本上就这些。用熟了你会发现,解构不是炫技,而是让取值这件事回归语义本身——你想要什么,就直接“拿什么”。











