前言：從網購包裹說起
在網路上大買特買一番的幾天後，物流寄來一個巨大紙箱，裝著你買的新球鞋、一件帽 T，還有一組藍牙耳機。每次要聽音樂時，你會把整個大紙箱揹在身上，把頭伸進紙箱裡找耳機嗎？當然不會！你會做的是「開箱」：把球鞋放到鞋櫃、帽 T 掛進衣櫥、耳機拿出來放在桌上，簡言之，你把原本都在「同一個箱子」裡的東西，拿出來變成「獨立」的物品，方便你隨手取用。
2015 年之前的 JavaScript 世界裡（稱為 ES5 時代），Web 設計師就像是揹著大紙箱的人，每次要用資料，都要輸入一長串的路徑去「箱子」裡撈。自從 ES6 版本發布後，JavaScript 引入一個革命性的語法：Destructuring Assignment（解構賦值），它就像是一把美工刀，讓我們能優雅地劃開資料的膠帶，把裡面的數值「瞬間」拿出來變成獨立的變數。今天，我們就用大學生活的日常拆解這個讓所有 Web 開發者都愛不釋手的語法糖。
第一章：為什麼我們需要「解構」
我們先來看看「沒有解構」的世界有多麻煩。
1. 痛苦的點名時間
假設你在寫一個社團成員的網頁，伺服器傳來一份社員資料，這是一個「物件（Object）」，部分內容如下：
JavaScript
// 這是我們拿到的一個資料包（Object）
const student = {
name: "王小明",
age: 20,
department: "資管系",
gpa: 3.8
};在 ES5 時代，如果想把這個同學的資訊印在螢幕上，必須這樣寫：
JavaScript
// ES5 時代寫法
const name = student.name;
const age = student.age;
const dept = student.department;
console.log(name + " 是 " + dept + " 的學生");發現了嗎？你一直重複寫 student.、student.、student.。這就像是每叫一次王小明，都要連名帶姓加上就讀科系喊一遍：「資管系的王小明請回答」、「資管系的王小明今年幾歲」。這種用法不僅累人，程式碼看起來也很雜亂。
2. 解構賦值的魔法
我們用「解構賦值」重寫這段程式碼，這就是把東西從箱子裡「拿出來」的瞬間：
JavaScript
// 新時代的寫法：解構！
const { name, department } = student;
console.log(name + " 是 " + department + " 的學生");這行 const { name, department } = student; 做了什麼事？它告訴電腦：「請去 student 這個箱子裡，找到標籤寫著 name 和 department 的東西，然後把它們拿出來，直接變成兩個獨立變數，名字也叫 name 和 department。」
就這樣，一行搞定。這就是解構的核心精神：DRY (Don’t Repeat Yourself)，別做重複的事。
第二章：陣列解構 (Array Destructuring)
JavaScript 裡有兩種最主要的資料容器：陣列 (Array) 和 物件 (Object)，解構這兩種容器的邏輯稍有不同，先從比較簡單的「陣列」講起。
1. 陣列就像「排隊」
陣列裡的資料是有順序的，就像你去學生餐廳的自助餐買便當時，店員會依序幫你夾菜：第一格是飯，第二格是青菜，第三格是雞腿，最後附上一瓶養樂多。
JavaScript
// 一個陣列，代表今天的便當
const lunchBox = ["白飯", "高麗菜", "炸雞腿", "養樂多"];2. 依序領取
如果我們要用解構的方式把便當裡的東西拿出來，必須使用 方括號 []（注意，這裡的方括號在等號左邊，代表解構，不是創造新陣列）。
JavaScript
// 陣列解構
const [staple, vegetable, meat, drink] = lunchBox;
console.log(meat); // 印出：炸雞腿這裡的邏輯是「對號入座」：
- 變數 staple 對應到 lunchBox 的第 1 個位置（Index 0）。
- 變數 vegetable 對應到第 2 個位置。
- 以此類推。
重要觀念： 在陣列解構中，變數的名字不重要，順序才重要。 你高興的話，可以把雞腿取名為 myLove：
JavaScript
const [item1, item2, myLove] = lunchBox;
console.log(myLove); // 還是印出：炸雞腿3. 跳過不想吃的菜
假設今天你不想吃菜，只想要飯和雞腿，怎麼辦？我們可以用「留白」的方式跳過中間的項目。
JavaScript
// 使用逗號跳過中間的元素
const [rice, , chicken] = lunchBox;
console.log(rice); // 白飯
console.log(chicken); // 炸雞腿
// 高麗菜就這樣被忽略了，不會產生變數佔用記憶體這在 Web 開發中很常見，有時候網頁網址分割後會產生一堆片段，我們只需要第一段和最後一段，中間的就可以用這種方式略過。
第三章：物件解構 (Object Destructuring)
接下來是 Web 開發中最常使用的 物件解構。
1. 物件就像「工具箱」
物件裡的資料沒有順序，但是有名字（Key）。這就像筆袋或工具箱，你找原子筆不是看它在「左邊數來第三支」，而是看它是不是原子筆。
JavaScript
const iphone = {
model: "iPhone 17",
storage: "256GB",
color: "Black",
price: 29900
};2. 認名不認人
物件解構使用的是 花括號 {}。
JavaScript
// 物件解構
const { price, model } = iphone;
console.log(model); // iPhone 17
console.log(price); // 29900注意到什麼了嗎？我在解構的時候，把 price 寫在 model 前面。 沒關係，完全不影響！ 因為物件解構是看「標籤名稱」，電腦會去 iphone 物件裡找 price 這個屬性，找到後塞給變數 price，順序怎麼換都沒差。
3. 幫變數取綽號（Renaming）
有時候伺服器傳回來的資料名字很爛，或者跟你的程式碼衝突。例如，伺服器給你的資料叫 class，但在 JavaScript 裡 class 是保留字（不能當變數名），這時候我們可以在解構的當下幫它改名。
JavaScript
const user = {
id: 9527,
name: "唐伯虎",
class: "高級伴讀書僮" // 假設後端傳來這個爛名字
};
// 語法： { 原本的名字 : 新的名字 }
const { name, class: jobTitle } = user;
console.log(jobTitle); // 印出：高級伴讀書僮
// console.log(class); // 這會報錯，因為 class 變數不存在，它已經被改名成 jobTitle 了這招在串接 API時超級好用，例如 Google Maps API 可能回傳 lat，但你的程式碼習慣用 latitude，你就可以寫 const { lat: latitude } = location;。
第四章：進階技巧
程式開發跟人生一樣，充滿了意外。有時候你以為箱子裡有東西，打開卻是空的，解構賦值提供了一些機制來處理這些狀況。
1. 預設值 (Default Values) —— 備案計畫
假設你在做一個抽獎系統，有些會員資料裡有填「暱稱」，有些沒有。
JavaScript
const memberA = { id: 1, nickname: "超級瑪利歐" };
const memberB = { id: 2 }; // 這位懶惰的會員沒填暱稱
// 設定預設值
const { nickname = "路人甲" } = memberB;
console.log(nickname); // 印出：路人甲語法 { nickname = “路人甲” } 的意思是：
- 先去物件裡找 nickname。
- 如果有找到值，就用那個值。
- 如果是 undefined（找不到），就用 “路人甲” 當作值。
這就像是去買便當，如果你沒說要什麼飲料，阿姨就「預設」給你養樂多，這能有效防止你的網頁因為讀不到資料而變成一片空白（或出現恐怖的 undefined）。
2. 巢狀解構 (Nested Destructuring) —— 箱中之箱
現實生活中的資料通常很複雜，像是「使用者的地址」可能又包含「城市」和「街道」。
JavaScript
const userProfile = {
name: "阿呆",
address: {
city: "台北市",
street: "羅斯福路",
zip: 100
}};如果你只想拿到 city，要怎麼做？
JavaScript
// 一層一層剝開洋蔥
const { address: { city } } = userProfile;
console.log(city); // 台北市這行程式碼的意思是：「去 userProfile 找 address，但不要把 address 拿出來，請進去 address 裡面再找 city，把 city 拿出來。」 所以執行完後，你會有 city 變數，但不會有 address 變數。
第五章：實戰情境
這可能是解構賦值在 Web 開發（特別是 React 框架）中，最最最重要的應用。
情境：手搖杯的客製化
想像你要寫一個函式來處理手搖杯訂單，一杯飲料可能有很多參數：甜度、冰塊、加料、尺寸、要不要袋子…
如果不使用解構，你的函式可能會長這樣：
JavaScript
// 舊寫法：參數順序必須死記硬背
function orderTea(teaName, sugar, ice, topping, size) {
console.log(`你要一杯 ${teaName}，${sugar}，${ice}...`);
}
// 呼叫的時候很痛苦，如果不加料還要傳 null 佔位子
orderTea("珍珠奶茶", "半糖", "少冰", null, "大杯");這簡直是惡夢，如果你忘記第 3 個參數是冰塊還是甜度怎麼辦？
解構參數的優雅寫法
現在，我們把所有選項打包成一個「物件」傳進去，並在函式接收端直接解構：
JavaScript
// 新寫法：接收一個物件，並直接解構出需要的屬性
// 還可以順便設定預設值！
function orderTea({ teaName, sugar = "全糖", ice = "去冰", topping = "無" }) {
console.log(`訂單：${teaName}, ${sugar}, ${ice}, 加料：${topping}`);
}
// 呼叫的時候：
// 1. 不需要管順序
// 2. 參數清楚明瞭
// 3. 沒寫的就會用預設值
orderTea({
teaName: "四季春",
ice: "微冰",
sugar: "無糖"
});這在現代 Web 開發中極為常見，當你看到 function Component({ title, color }) 這樣的寫法時，請記得，它其實就是把傳進來的那個大物件，當場拆解成 title 和 color 兩個變數給函式內部使用。
第六章：那些讓你看起來很厲害的酷招式
最後，介紹兩個大學生在寫作業或專題時，可以用來耍帥（同時也很實用）的小技巧。
1. 變數交換 (Swapping Variables)
在學習程式基礎（如 C 語言或 Java）時，如果要交換兩個變數的值，通常需要一個「暫存變數（temp）」，例如要交換 A 和 B 的飲料：
- 先把 A 倒進空杯 C。
- 把 B 倒進 A。
- 把 C 倒進 B。
但在 JavaScript 裡，有了解構，你可以像變魔術一樣：
JavaScript
let a = "可樂";
let b = "雪碧";
// 左邊是解構，右邊是創造陣列
// 瞬間交換！
[a, b] = [b, a];
console.log(a); // 雪碧
console.log(b); // 可樂這就像是雙手交叉瞬間交換手上的東西，非常帥氣且節省程式碼。
2. 其餘運算符 (Rest Operator)
有時候你只想拿走便當裡的雞腿，剩下的菜你想全部打包給室友吃，這時候可以用 …（三個點，稱為 Rest Operator）。
JavaScript
const team = ["隊長", "副隊長", "隊員A", "隊員B", "隊員C"];
const [captain, ...others] = team;
console.log(captain); // 隊長
console.log(others); // ["副隊長", "隊員A", "隊員B", "隊員C"]這裡的 …others 意思就是：「剩下的所有東西，幫我打包成一個陣列，放進 others 變數裡」，這在處理不確定數量的資料時非常有用。
結語：從「整理」開始的程式美學
恭喜你！你已經學會了現代 JavaScript 中最強大的語法之一：解構賦值。
回顧一下重點：
- 物件解構 {}：像是在工具箱找標籤，不看順序，只看名字。
- 陣列解構 []：像是在自助餐排隊，只看順序，變數名字隨你取。
- 預設值 =：防止資料缺漏的備案。
- 函式參數解構：讓你的函式介面更乾淨、更好用。
解構賦值不僅僅是為了讓程式碼變短，更重要的是讓程式碼的「意圖」變清晰。當你閱讀 const { name } = user 時，你不用看上下文就能知道：「哦，這段程式碼只關心使用者的名字。」在未來的 Web 開發學習路上，不管是 React、Vue 還是 Node.js，你將會每天、每小時都看到解構賦值的身影。它就像是程式設計師的瑞士刀，一旦用習慣了，你就再也回不去那個徒手拆包裹的舊時代了。現在，打開你的瀏覽器開發者工具（按 F12），試著解構一下你身邊的資料吧！
Leave a Reply