JavaScript - 解構賦值

你好，有抱負的 JavaScript 開發者！今天，我們將深入探討現代 JavaScript 最強大和最方便的功能之一：解構賦值。不要被這個花哨的名稱嚇倒——在本課結束時，你將會像專家一樣進行解構，並且會想知道没有這個功能你以前是如何生活的！

JavaScript - Destructuring Assignment

什麼是解構賦值？

想像你有一個包裝精美的禮盒。解構就像打開那個盒子，一次性取出你想要的特定物品。在 JavaScript 的術語中，這是一種將數組中的值或對象中的屬性解包到獨立變量的巧妙方式。酷炫吧？

讓我們從基礎開始，逐步深入到更複雜的例子。

數組解構賦值

數組解構賦值讓你可以從數組中提取值並將它們賦值給變量，所有操作都在一行代碼中完成。這就像伸手進一袋混合糖果中，精確地挑出你想要的口味！

基本數組解構

const fruits = ['apple', 'banana', 'cherry'];
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit);  // 輸出：'apple'
console.log(secondFruit); // 輸出：'banana'
console.log(thirdFruit);  // 輸出：'cherry'

在這個例子中，我們將 fruits 數組解包到三個獨立的變量中。這裡的順序很重要——firstFruit 獲得第一個元素，secondFruit 獲得第二個元素，以此類推。

跳過元素

如果你只想取某些元素呢？沒問題！你可以跳過你不需要的元素：

const colors = ['red', 'green', 'blue', 'yellow'];
const [primaryColor, , , accentColor] = colors;

console.log(primaryColor); // 輸出：'red'
console.log(accentColor);  // 輸出：'yellow'

在這裡，我們使用逗號跳過了第二個和第三個元素。這就像告訴 JavaScript 服務員：“我想要菜單上的第一個和第四個項目，請！”

使用剩餘操作符

有時候，你想要單獨取出前幾個項目，然後將其餘的項目合並在一起。這時剩餘操作符（...）就派上用場了：

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...theRest] = numbers;

console.log(first);    // 輸出：1
console.log(second);   // 輸出：2
console.log(theRest);  // 輸出：[3, 4, 5]

剩餘操作符就像說：“給我前兩個，然後把其餘的放在一個狗食袋裡！”

變量互換

這有一個巧妙的小技巧——你可以使用解構來互換變量，而不需要臨時變量：

let hot = 'summer';
let cold = 'winter';

[hot, cold] = [cold, hot];

console.log(hot);  // 輸出：'winter'
console.log(cold); // 輸出：'summer'

這就像一個魔術，你可以不用第三個杯子就互換兩個杯子的內容！

對象解構賦值

現在，讓我們來看看對象解構。這在處理 API 或複雜數據結構時特別有用。

基本對象解構

const person = {
name: 'Alice',
age: 30,
city: 'Wonderland'
};

const { name, age, city } = person;

console.log(name); // 輸出：'Alice'
console.log(age);  // 輸出：30
console.log(city); // 輸出：'Wonderland'

在這裡，我們從 person 對象中提取了特定的屬性。需要注意的是，變量名必須與屬性名匹配（除非我們指定其他名稱，我們稍後會看到）。

賦值給不同變量名

如果你想要使用不同的變量名呢？不必擔心：

const book = {
title: 'The Hitchhiker's Guide to the Galaxy',
author: 'Douglas Adams',
year: 1979
};

const { title: bookName, author: writer, year: publicationYear } = book;

console.log(bookName);        // 輸出：'The Hitchhiker's Guide to the Galaxy'
console.log(writer);          // 輸出：'Douglas Adams'
console.log(publicationYear); // 輸出：1979

這就像給你提取的屬性起綽號！

預設值

有時候，對象可能沒有你尋找的所有屬性。你可以設定預設值來處理這種情況：

const car = {
make: 'Toyota',
model: 'Corolla'
};

const { make, model, year = 2023 } = car;

console.log(make);  // 輸出：'Toyota'
console.log(model); // 輸出：'Corolla'
console.log(year);  // 輸出：2023

如果 car 對象中沒有 year 屬性，它會預設為 2023。這就像有一個備用計劃！

嵌套對象解構

對象可以嵌套，解構也可以：

const student = {
name: 'Bob',
scores: {
math: 95,
english: 88,
science: 92
}
};

const { name, scores: { math, english, science } } = student;

console.log(name);    // 輸出：'Bob'
console.log(math);    // 輸出：95
console.log(english); // 輸出：88
console.log(science); // 輸出：92

這就像打開一個俄羅斯套娃——你正在解包對象中的對象！

結合數組和解構解構

你甚至可以結合數組和解構解構，形成一些非常強大的表達式：

const forecast = [
{ day: 'Monday', temp: 22 },
{ day: 'Tuesday', temp: 25 },
{ day: 'Wednesday', temp: 20 }
];

const [, { temp: tuesdayTemp }] = forecast;

console.log(tuesdayTemp); // 輸出：25

在這裡，我們跳過了數組中的第一個對象，然後從第二個對象中解構出 temp 屬性，所有操作一氣呵成！

下一個步驟？

現在你已經掌握了解構的藝術，你會發現它在你的 JavaScript 旅程中非常有用。它是處理複雜數據結構的絕佳工具，可以使你的代碼更乾淨、更易於閱讀。

這裡是我們討論過的解構方法的快速參考表：

方法	描述
數組解構	將數組元素解包到變量中
跳過數組元素	使用逗號跳過不需要的元素
數組中的剩餘操作符	將剩餘元素合並到一個數組中
變量互換	在不使用臨時變量的情況下互換變量的值
對象解構	將對象屬性解包到變量中
變量名重命名	將對象屬性賦值給不同的變量名
預設值	為未定義的屬性設定默認值
嵌套解構	解包嵌套的對象或數組

記住，熟能生巧！嘗試在你的項目中使用解構，很快它就會變得習以為常。祝你好運，願你的變量總是能夠被整齊地解包！??

Credits: Image by storyset