JavaScript 的解构赋值是 ES6
引入的一项非常实用的特性，让我们能够以更简洁的方式从数组或对象中提取值。然而，看似简单的解构赋值其实暗藏着不少”坑”，如果不小心就会踩中。
1. 解构未定义的对象
// 这段代码会报错
const { name, age } = userData;
当 userData 是 undefined 或 null 时，这段代码会抛出 “Cannot destructure
property ‘name’ of ‘userData’ as it is undefined” 的错误。
** 避坑方法 ** ：使用默认值或条件判断
// 方法一：设置默认值为空对象
const { name, age } = userData || {};
// 方法二：使用可选链操作符
const name = userData?.name;
const age = userData?.age;
2. 变量重命名时的混淆
const obj = { a: 1, b: 2 };
const { a: x, b } = obj;
console.log(a); // ReferenceError: a is not defined
console.log(x); // 1
在解构重命名时，冒号左边是原属性名，右边是新变量名。不少开发者会混淆这个顺序，导致意想不到的问题。
3. 嵌套解构的可读性陷阱
const {
user: {
profile: { firstName, lastName },
account: { id }
}
} = response;
过度嵌套的解构赋值虽然简洁，但可读性会大大降低，维护起来也更困难。
** 避坑方法 ** ：适度使用嵌套解构，或者分多步进行
const { user } = response;
const { profile, account } = user;
const { firstName, lastName } = profile;
const { id } = account;
4. 数组解构时的空位问题
const [a, , b] = [1, 2, 3];
console.log(a, b); // 1 3
使用空逗号跳过数组元素可能会导致代码难以阅读，特别是当空位过多时。
5. 解构赋值与函数参数默认值混用
参数默认值与解构默认值的组合可能会让人困惑，特别是当需要区分”未提供参数”和”提供了含有undefined值的参数”时。
6. 不小心使用对象字面量作为解构目标
正确的做法是：
7. 解构赋值与迭代器中断
const [first, ...rest, last] = [1, 2, 3, 4];
// SyntaxError: Rest element must be last element
剩余参数（rest）必须是解构模式中的最后一个元素，否则会抛出语法错误。
8. 解构赋值表达式的返回值
解构赋值的返回值是等号右侧的值（整个对象），而不是解构出的变量集合，这一点经常被误解。
9. 对象属性与变量名冲突
当解构属性名与已有变量名冲突时，原变量会被覆盖，这可能导致意料之外的问题。
10. 解构大型对象可能的性能问题
频繁地解构大型对象或深层嵌套对象可能会带来性能损耗，特别是在关键代码路径上。
** 避坑方法 ** ：只解构需要的属性，避免不必要的操作
// 不要这样
const { a, b, c, ...rest } = hugeObject;
// 如果只需要 a，只解构 a
const { a } = hugeObject;
欢迎补充。