第十七天：ES6 解構賦值與擴展運算符

ES6 中非常實用的兩個功能：解構賦值（Destructuring Assignment） 和 擴展運算符（Spread Operator）。這些語法能夠更簡潔、直觀地處理物件和陣列，減少重複代碼，並提高程式的可讀性。

1. 解構賦值（Destructuring Assignment）

解構賦值允許我們從陣列或物件中快速提取值，並將它們賦值給變數。這種語法讓代碼更簡潔，特別是在處理多個屬性或陣列元素時。

1.1 陣列的解構賦值

透過解構賦值，我們可以從陣列中提取出指定位置的元素，並賦值給對應的變數。

範例：
let numbers = [10, 20, 30];
let [first, second, third] = numbers;

console.log(first); // 輸出 10
console.log(second); // 輸出 20
console.log(third); // 輸出 30

還可以跳過不需要的元素：
let [first, , third] = numbers;
console.log(third); // 輸出 30

1.2 物件的解構賦值

物件的解構賦值則是根據物件的屬性名稱來提取值，這在處理含有多個屬性的物件時非常方便。

範例：
let person = { name: "Alice", age: 25, city: "New York" };
let { name, age } = person;

console.log(name); // 輸出 "Alice"
console.log(age); // 輸出 25

你還可以為變數重新命名：
let { name: fullName, age: yearsOld } = person;
console.log(fullName); // 輸出 "Alice"
console.log(yearsOld); // 輸出 25

2. 擴展運算符（Spread Operator）

擴展運算符（...）讓我們可以將陣列或物件「展開」，用於拷貝、合併，或者作為參數傳遞。這種運算符大大提高了我們處理陣列和物件的靈活性。

2.1 陣列中的擴展運算符

你可以用擴展運算符來將陣列元素展開到新的陣列中，這是一種簡潔的合併陣列方法。

範例：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];

console.log(combined); // 輸出 [1, 2, 3, 4, 5, 6]

此外，擴展運算符也能用來創建陣列的拷貝：
let copy = [...arr1];
console.log(copy); // 輸出 [1, 2, 3]

2.2 物件中的擴展運算符

物件中的擴展運算符也同樣有用，特別是在合併兩個物件或創建物件的拷貝時。

範例：
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let merged = { ...obj1, ...obj2 };

console.log(merged); // 輸出 { a: 1, b: 2, c: 3, d: 4 }

也可以用來更新物件的屬性：
let person = { name: "Alice", age: 25 };
let updatedPerson = { ...person, age: 26 };

console.log(updatedPerson); // 輸出 { name: "Alice", age: 26 }

3. 結合使用

解構賦值與擴展運算符經常一起使用，特別是當我們想要從物件或陣列中提取部分資料，同時保留其他部分時。

範例：
let person = { name: "Bob", age: 30, city: "London" };
let { name, ...rest } = person;

console.log(name); // 輸出 "Bob"
console.log(rest); // 輸出 { age: 30, city: "London" }

在這裡，我們使用解構賦值提取了 name，同時使用擴展運算符將剩餘的屬性保存在 rest 變數中。