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

在解構重命名時，冒號左邊是原屬性名，右邊是新變量名。不少開發(fā)者會混淆這個順序，導致意想不到的問題。

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. 解構賦值與函數參數默認值混用

參數默認值與解構默認值的組合可能會讓人困惑，特別是當需要區(qū)分"未提供參數"和"提供了含有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;