JavaScript 解構（Destructuring）簡介

解構是 ES6 引入的一種語法，它允許從數組或對象中快速提取值，并將這些值賦給變量。解構使代碼更加簡潔、可讀性更強，特別是在處理復雜的數據結構時。

解構賦值分類

1. 數組解構賦值
2. 對象解構賦值
3. 嵌套解構
4. 默認值
5. 剩余（Rest）解構

1. 數組解構賦值

基礎用法

從數組中按順序提取值，賦給變量：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

跳過元素

可以通過省略的位置跳過某些元素：

const arr = [1, 2, 3, 4];
const [a, , c] = arr; // 跳過第二個元素

console.log(a); // 1
console.log(c); // 3

結合剩余操作符

將數組的剩余部分賦值給變量：

const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;

console.log(a);    // 1
console.log(rest); // [2, 3, 4]

2. 對象解構賦值

基礎用法

從對象中提取值，變量名需與對象的鍵名一致：

const obj = { name: "John", age: 30 };
const { name, age } = obj;

console.log(name); // "John"
console.log(age);  // 30

修改變量名

通過 : 指定變量名：

const obj = { name: "John", age: 30 };
const { name: userName, age: userAge } = obj;

console.log(userName); // "John"
console.log(userAge);  // 30

結合默認值

在解構時為變量設置默認值：

const obj = { name: "John" };
const { name, age = 25 } = obj;

console.log(name); // "John"
console.log(age);  // 25 （age 默認值）

提取嵌套對象

可以解構嵌套對象：

const obj = { user: { name: "John", age: 30 } };
const { user: { name, age } } = obj;

console.log(name); // "John"
console.log(age);  // 30

3. 嵌套解構

嵌套數組

數組中嵌套數組的解構：

const arr = [1, [2, 3]];
const [a, [b, c]] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

嵌套對象

對象中嵌套對象的解構：

const obj = { a: { b: { c: 10 } } };
const { a: { b: { c } } } = obj;

console.log(c); // 10

4. 默認值

數組默認值

解構時如果值為 undefined，會使用默認值：

const arr = [1];
const [a, b = 2] = arr;

console.log(a); // 1
console.log(b); // 2

對象默認值

同樣適用于對象解構：

const obj = { name: "John" };
const { name, age = 30 } = obj;

console.log(name); // "John"
console.log(age);  // 30

5. 剩余（Rest）解構

數組中的剩余

可以通過 ... 操作符收集數組中的剩余元素：

const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;

console.log(a);    // 1
console.log(rest); // [2, 3, 4]

對象中的剩余

收集對象中未解構的屬性：

const obj = { name: "John", age: 30, gender: "male" };
const { name, ...rest } = obj;

console.log(name); // "John"
console.log(rest); // { age: 30, gender: "male" }

6. 結合函數參數解構

數組解構參數

函數參數直接解構：

function sum([a, b]) {
  return a + b;
}

console.log(sum([1, 2])); // 3

對象解構參數

通過對象解構指定參數：

function greet({ name, age }) {
  return `Hello, ${name}. You are ${age} years old.`;
}

console.log(greet({ name: "John", age: 30 })); 
// "Hello, John. You are 30 years old."

7. 解構的常見應用場景

交換變量值

let a = 1, b = 2;
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

從函數返回值中提取

function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();
console.log(x, y); // 10, 20

從對象中提取部分值

const user = { id: 1, name: "John", age: 30 };
const { id, name } = user;

console.log(id);   // 1
console.log(name); // "John"

設置默認配置

const config = { width: 800 };
const { width, height = 600 } = config;

console.log(width);  // 800
console.log(height); // 600

總結

解構賦值是 JavaScript 中非常強大的語法工具，可以大幅簡化代碼，特別是在處理復雜數據結構、函數參數和默認值時。掌握數組和對象解構是寫高效 JavaScript 的重要技能！