學會這 12 個解構(gòu)用法，代碼量能省一半
作者：story
解構(gòu)賦值是 ES6 帶來的重要特性之一，掌握好它不僅能讓代碼更簡潔，還能大大提高開發(fā)效率。分享 12 個實用的解構(gòu)用法，讓你的代碼更優(yōu)雅。
解構(gòu)賦值是 ES6 帶來的重要特性之一，掌握好它不僅能讓代碼更簡潔，還能大大提高開發(fā)效率。分享 12 個實用的解構(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); // 32. 對象解構(gòu)重命名
當我們需要避免命名沖突時，可以給解構(gòu)的屬性起新名字：
const person = {
name: '張三',
age: 25
};
const { name: userName, age: userAge } = person;
console.log(userName); // '張三'
console.log(userAge); // 253. 設(shè)置默認值
解構(gòu)時可以設(shè)置默認值，防止取到 undefined：
// 數(shù)組默認值
const [x = 1, y = 2] = [undefined, null];
console.log(x); // 1
console.log(y); // null
// 對象默認值
const { title = '默認標題', count = 0 } = {};
console.log(title); // '默認標題'
console.log(count); // 04. 嵌套解構(gòu)
對于復雜的嵌套數(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é)合擴展運算符
擴展運算符配合解構(gòu)使用，能夠輕松處理剩余元素：
6. 函數(shù)參數(shù)解構(gòu)
在函數(shù)參數(shù)中使用解構(gòu)可以讓代碼更清晰：
7. 動態(tài)屬性解構(gòu)
可以使用計算屬性名進行解構(gòu)：
8. 解構(gòu)用于交換變量
使用解構(gòu)可以優(yōu)雅地交換變量值：
9. 鏈式解構(gòu)賦值
可以在一行中進行多個解構(gòu)賦值：
10. 解構(gòu)配合正則匹配
在處理正則表達式結(jié)果時，解構(gòu)特別有用：
11. 解構(gòu)導入模塊
在導入模塊時，解構(gòu)可以只引入需要的部分：
12. 條件解構(gòu)
結(jié)合空值合并運算符，可以實現(xiàn)條件解構(gòu)：
const data = null;
const { value = 'default' } = data ?? {};
console.log(value); // 'default'歡迎補充。
責任編輯：趙寧寧
來源：
JavaScript
