解构赋值是JavaScript中改变数据提取方式的底层能力，核心为模式匹配，需注意null/undefined报错、嵌套安全、默认值设置及性能与可读性平衡。
解构赋值不是语法糖，它是 JavaScript 中真正改变数据提取方式的底层能力——用对了能少写一半的 const a = obj.a; const b = obj.b;，用错了反而让代码更难读。
怎么从对象里安全取值
对象解构的核心是「模式匹配」：左边的结构必须和右边的结构大致对齐，否则会得到 undefined。它不校验字段是否存在，也不抛错，这点容易被忽略。
常见错误现象：解构一个 null 或 undefined 的对象时，直接报 TypeError: Cannot destructure property 'x' of 'y' as it is undefined。
- 加默认值防崩：
const { name = 'anonymous', age = 0 } = user || {}; - 嵌套解构要小心层级：
const { profile: { email } } = data;—— 如果data.profile是undefined，就会报错 - 重命名字段用冒号：
const { id: userId, name: userName } = user;
数组解构的关键是位置，不是名字
数组解构靠索引位置对应，和变量名无关。它天然支持跳过、剩余、交换等操作，比 arr[0] 写法更直观。
立即学习“Java免费学习笔记（深入）”；
使用场景：函数返回多个值、处理 API 响应中的固定结构数组、快速交换两个变量。
- 跳过中间项：
const [first, , third] = ['a', 'b', 'c']; // first='a', third='c' - 获取剩余元素：
const [head, ...tail] = [1, 2, 3, 4]; // tail = [2, 3, 4] - 交换变量不用临时变量：
[a, b] = [b, a]; - 函数参数直接解构：
function draw({ x = 0, y = 0, color = 'black' }) { ... }
解构 + 默认值 + 短路逻辑的组合技
单独用默认值不够健壮，常需配合空值判断。很多人只写 { a = 1 } = obj，却忘了 obj 本身可能为 null。
性能影响很小，但可读性高度依赖团队习惯——过度嵌套解构（比如三层以上）会让调试变困难。
- 稳妥写法：
const { items = [] } = response?.data || {}; - 避免在循环中反复解构同一对象（无必要开销）
- 函数参数解构时，不要混用具名参数和解构参数：
function f(x, { y })比function f({ x, y })更难追踪调用来源
const user = { name: 'Alice', profile: { city: 'Beijing' } };
const { name, profile: { city = 'Unknown' } = {} } = user || {};
// 注意：profile 后面的 = {} 是给 profile 字段设默认值，不是给整个 user 设
最易被忽略的一点：解构赋值本身不创建新对象或数组，它只是“读取”；但如果你在解构时用了展开运算符（...），那就涉及浅拷贝了——这时候得留意引用问题。
