前兩天我先練習了變數、函式，還有物件跟陣列的基本操作。
今天要學的是 ES6 新增的一些語法糖：解構、展開運算子、模板字串。
這些語法不是必須的，但用熟了程式會更簡潔，看起來也比較好懂。

解構（Destructuring）

以前要從物件或陣列裡拿值，都要一個一個指定：

let student = { name: "小明", score: 80 };

let name = student.name;
let score = student.score;

現在可以用解構一次拿出來：

let { name, score } = student;
console.log(name);  // "小明"
console.log(score); // 80

陣列也可以解構：

let scores = [80, 90, 100];
let [first, second] = scores;

console.log(first);  // 80
console.log(second); // 90

展開運算子（Spread Operator ...）

展開運算子可以把陣列或物件「攤開」。

陣列合併

let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b];
console.log(c); // [1, 2, 3, 4]

複製物件 + 覆蓋屬性

let student = { name: "小明", score: 80 };
let newStudent = { ...student, score: 95 };

console.log(newStudent); // { name: "小明", score: 95 }

這個功能很常用在「更新資料」的時候，不會改到原本的物件，而是產生新的。

模板字串（Template String `）

以前要組字串都要加號：

let name = "小明";
let score = 90;
console.log("學生 " + name + " 的分數是 " + score);

有了模板字串，可以用反引號 ` ，再加上 ${} 插值：

console.log(`學生 ${name} 的分數是 ${score}`);
// 學生 小明 的分數是 90

模板字串還能換行，寫多行字串超方便：

let message = `
Hi ${name},
你這次的分數是 ${score}，
繼續加油！
`;

console.log(message);

實作練習：學生報告

結合今天學的三個語法，我試著把昨天的學生名單重新寫一次：

let students = [
  { name: "小明", score: 80 },
  { name: "小美", score: 55 },
  { name: "阿土", score: 90 }
];

// 1. 解構
students.forEach(({ name, score }) => {
  console.log(`${name} 的分數是 ${score}`);
});

// 2. 展開運算子：加一位新同學
let newStudent = { name: "阿花", score: 70 };
let newClass = [...students, newStudent];
console.log(newClass);

// 3. 模板字串：產生成績單
let report = newClass
  .map(({ name, score }) => `${name}：${score} 分`)
  .join("\n");

console.log("=== 成績單 ===\n" + report);

輸出結果：

小明 的分數是 80
小美 的分數是 55
阿土 的分數是 90
=== 成績單 ===
小明：80 分
小美：55 分
阿土：90 分
阿花：70 分

🎯 學習心得 / 今日收穫

今天的三個語法給我的感覺是「程式可以寫得更輕鬆」。
解構讓我不用一行一行取值，直接展開就能用。
展開運算子很適合處理「複製 + 更新」，這樣就不會不小心改壞原始資料。
模板字串真的比加號好用太多，不只字串更清楚，還能直接換行。

如果 Day 1 是練「土法煉鋼」，Day 2 是學「工具箱」，那 Day 3 就有點像是發現「捷徑」。
我開始理解為什麼大家都說 ES6 把 JavaScript 變得更好寫了。