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