學(xué)會這 12 個(gè)解構(gòu)用法，代碼量能省一半

作者：story 2025-02-27 07:00:00

解構(gòu)賦值是 ES6 帶來的重要特性之一，掌握好它不僅能讓代碼更簡潔，還能大大提高開發(fā)效率。分享 12 個(gè)實(shí)用的解構(gòu)用法，讓你的代碼更優(yōu)雅。

1. 數(shù)組基礎(chǔ)解構(gòu)

最基本的數(shù)組解構(gòu)讓我們能夠輕松地提取數(shù)組元素：

// 基礎(chǔ)解構(gòu)
const [first, second] = [1, 2, 3];
console.log(first);  // 1
console.log(second); // 2

// 跳過元素
const [, , third] = [1, 2, 3];
console.log(third);  // 3

2. 對象解構(gòu)重命名

當(dāng)我們需要避免命名沖突時(shí)，可以給解構(gòu)的屬性起新名字：

const person = {
  name: '張三',
  age: 25
};

const { name: userName, age: userAge } = person;
console.log(userName); // '張三'
console.log(userAge);  // 25

3. 設(shè)置默認(rèn)值

解構(gòu)時(shí)可以設(shè)置默認(rèn)值，防止取到 undefined：

// 數(shù)組默認(rèn)值
const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null

// 對象默認(rèn)值
const { title = '默認(rèn)標(biāo)題', count = 0 } = {};
console.log(title); // '默認(rèn)標(biāo)題'
console.log(count); // 0

4. 嵌套解構(gòu)

對于復(fù)雜的嵌套數(shù)據(jù)結(jié)構(gòu)，我們可以使用嵌套解構(gòu)：

const user = {
  id: 1,
  info: {
    name: '李四',
    address: {
      city: '北京'
    }
  }
};

const { info: { name, address: { city } } } = user;
console.log(name); // '李四'
console.log(city); // '北京'

5. 結(jié)合擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符配合解構(gòu)使用，能夠輕松處理剩余元素：

6. 函數(shù)參數(shù)解構(gòu)

在函數(shù)參數(shù)中使用解構(gòu)可以讓代碼更清晰：

7. 動態(tài)屬性解構(gòu)

可以使用計(jì)算屬性名進(jìn)行解構(gòu)：

8. 解構(gòu)用于交換變量

使用解構(gòu)可以優(yōu)雅地交換變量值：

9. 鏈?zhǔn)浇鈽?gòu)賦值

可以在一行中進(jìn)行多個(gè)解構(gòu)賦值：

10. 解構(gòu)配合正則匹配

在處理正則表達(dá)式結(jié)果時(shí)，解構(gòu)特別有用：

11. 解構(gòu)導(dǎo)入模塊

在導(dǎo)入模塊時(shí)，解構(gòu)可以只引入需要的部分：

12. 條件解構(gòu)

結(jié)合空值合并運(yùn)算符，可以實(shí)現(xiàn)條件解構(gòu)：

const data = null;
const { value = 'default' } = data ?? {};
console.log(value); // 'default'

歡迎補(bǔ)充。

責(zé)任編輯：趙寧寧來源： JavaScript

解構(gòu)賦值代碼 JavaScript