JavaScript 的解構(gòu)賦值是 ES6 引入的一項非常實用的特性，讓我們能夠以更簡潔的方式從數(shù)組或?qū)ο笾刑崛≈?。然而，看似簡單的解?gòu)賦值其實暗藏著不少"坑"，如果不小心就會踩中。

1. 解構(gòu)未定義的對象

// 這段代碼會報錯
const { name, age } = userData;

當(dāng) userData 是 undefined 或 null 時，這段代碼會拋出 “Cannot destructure property ‘name’ of ‘userData’ as it is undefined” 的錯誤。

避坑方法：使用默認(rèn)值或條件判斷

// 方法一：設(shè)置默認(rèn)值為空對象
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

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

3. 嵌套解構(gòu)的可讀性陷阱

const {
  user: {
    profile: { firstName, lastName },
    account: { id }
  }
} = response;

過度嵌套的解構(gòu)賦值雖然簡潔，但可讀性會大大降低，維護(hù)起來也更困難。

避坑方法：適度使用嵌套解構(gòu)，或者分多步進(jìn)行

const { user } = response;
const { profile, account } = user;
const { firstName, lastName } = profile;
const { id } = account;

4. 數(shù)組解構(gòu)時的空位問題

const [a, , b] = [1, 2, 3];
console.log(a, b); // 1 3

使用空逗號跳過數(shù)組元素可能會導(dǎo)致代碼難以閱讀，特別是當(dāng)空位過多時。

5. 解構(gòu)賦值與函數(shù)參數(shù)默認(rèn)值混用

參數(shù)默認(rèn)值與解構(gòu)默認(rèn)值的組合可能會讓人困惑，特別是當(dāng)需要區(qū)分"未提供參數(shù)"和"提供了含有undefined值的參數(shù)"時。

6. 不小心使用對象字面量作為解構(gòu)目標(biāo)

正確的做法是：

7. 解構(gòu)賦值與迭代器中斷

const [first, ...rest, last] = [1, 2, 3, 4];
// SyntaxError: Rest element must be last element

剩余參數(shù)（rest）必須是解構(gòu)模式中的最后一個元素，否則會拋出語法錯誤。

8. 解構(gòu)賦值表達(dá)式的返回值

解構(gòu)賦值的返回值是等號右側(cè)的值（整個對象），而不是解構(gòu)出的變量集合，這一點經(jīng)常被誤解。

9. 對象屬性與變量名沖突

當(dāng)解構(gòu)屬性名與已有變量名沖突時，原變量會被覆蓋，這可能導(dǎo)致意料之外的問題。

10. 解構(gòu)大型對象可能的性能問題

頻繁地解構(gòu)大型對象或深層嵌套對象可能會帶來性能損耗，特別是在關(guān)鍵代碼路徑上。

避坑方法：只解構(gòu)需要的屬性，避免不必要的操作

// 不要這樣
const { a, b, c, ...rest } = hugeObject;

// 如果只需要 a，只解構(gòu) a
const { a } = hugeObject;