JavaScript解构赋值是按结构匹配自动取值，声明与提取一步完成；数组按位置、对象按属性名，支持默认值、剩余元素、重命名、嵌套及函数参数解构，需注意声明语法、null/undefined校验等细节。
JavaScript 中用解构赋值提取数据，本质是“按结构匹配、自动取值”，不是先声明再赋值，而是声明与提取一步完成。
数组解构：按位置取值
左边用方括号写变量名，顺序对应右边数组的索引。没匹配的项忽略，多余变量得默认值或为 undefined。
-
基本用法：
const [a, b] = [1, 2];→ a 是 1，b 是 2 -
跳过某项：
const [, second] = ['apple', 'banana'];→ second 是 'banana' -
设置默认值：
const [x = 0, y = 0] = [5];→ x 是 5，y 是 0 -
剩余元素收集：
const [first, ...rest] = [10, 20, 30, 40];→ rest 是 [20, 30, 40]
对象解构：按属性名取值
左边用花括号写属性名（可重命名），名字必须和右边对象的键一致（或通过冒号映射）。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
基础写法：
const { name, age } = { name: 'Alice', age: 30 }; -
重命名变量：
const { name: fullName, age: years } = { name: 'Bob', age: 25 };→ fullName 是 'Bob' -
嵌套解构：
const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: 'Shanghai' } } }; -
默认值 + 可选链配合（需注意：解构本身不支持可选链，但可结合逻辑运算符）：
const { title = 'Untitled' } = post || {};
函数参数中直接解构
把解构写在形参位置，调用时传入对应结构的数据，代码更简洁清晰。
立即学习“Java免费学习笔记（深入）”；
-
数组参数：
function print([first, second]) { console.log(first, second); }→print(['a', 'b'])输出 'a b' -
对象参数（常用）：
function greet({ name, greeting = 'Hello' }) { return `${greeting}, ${name}!`; }→greet({ name: 'Tom' })返回 'Hello, Tom!' - 混合使用：可同时解构数组和对象，甚至嵌套，只要结构对得上
注意事项与常见坑
解构看起来简单，但几个细节容易出错。
-
不能单独解构未声明变量：
{ a, b } = { a: 1, b: 2 };会报错，必须加const/let/var，或用小括号包裹：({ a, b } = { a: 1, b: 2 }); -
null 或 undefined 会报错：
const { x } = null;直接抛异常，建议提前校验或用空对象兜底：const { x } = data || {}; - 解构不改变原数据：只是读取副本，原数组或对象保持不变
-
字符串也能解构（类数组）：
const [a, b] = 'hi';→ a 是 'h'，b 是 'i'
