JavaScript 程式札記 : ES6 解構賦值

什麼是解構賦值?

解構賦值是 JavaScript ES6 的特性，它讓我們能更簡單地從陣列或物件中提取值，並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔，還提升了可讀性。

解構賦值的應用

1. 基礎用法

解構賦值允許我們直接從陣列中取出元素，並賦值到新的變數中。例如：

const test = ['A', 'B', 'C'];
const [test1, test2] = test;
console.log(test1, test2); // 結果: A B

我們也可以選擇忽略陣列中的某些元素，只取我們需要的：

const array = ['A', 'B', 'C'];
const [test1, , test3] = array;
console.log(test1, test3); // 結果: A C

2. 從物件中提取資料

物件解構賦值則是讓我們能從物件中提取屬性，並賦值給變數，例如：

const user = {
 name: 'Alice',
 age: 30
};
const {name, age} = user;
console.log(name, age); // 結果: Alice 30

我們也可以給解構的屬性設定新的變數名稱，例如 :

const {name:x, age:y} = user; // x = Alice, y = 30

3. 預設變數的值

解構賦值還允許我們為變數設定預設值，這在解構的元素不存在時會非常好用：

const [city1, city2, city3= 'Taipei'] = ['Kaohsiung', 'Taichung'];
console.log(city3); // 結果: Taipei

4. 函式參數中的解構賦值

解構賦值也可以用在函式參數中，這讓我們可以更簡單的處理傳入的物件參數：

function test({data1, data2 = '2'}) {
 console.log(`${data2}, ${data1}!`);
}
test({data1: '1', data2: 'two'}); // 結果: two, 1!
test({data1: '1'}); // 結果: 2, 1!

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡