ES6+ 新特性總覽

解構賦值（Destructuring）

// 陣列解構
let [a, b, c] = [1, 2, 3];
let [first, ...rest] = [1, 2, 3, 4, 5];  // rest = [2,3,4,5]

// 交換變數
let x = 1, y = 2;
[x, y] = [y, x];    // ← x=2, y=1（不需要 temp 變數！）

// 物件解構
let { name, age } = { name: "小明", age: 20 };

// 函式參數解構
function greet({ name, age = 18 }) {
    console.log(`${name}, ${age}歲`);
}
greet({ name: "小明", age: 20 });

模板字串（Template Literals）

let name = "小明";
let age = 20;

// 舊寫法
let msg1 = "你好，" + name + "！你今年 " + age + " 歲。";

// 新寫法（反引號 + ${}）
let msg2 = `你好，${name}！你今年 ${age} 歲。`;

// 多行字串
let html = `
    <div class="card">
        <h2>${name}</h2>
        <p>年齡：${age}</p>
    </div>
`;

// 可以放運算式
let msg3 = `${age >= 18 ? "成年" : "未成年"}`;

展開與剩餘（Spread / Rest）

// Spread（展開）
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];     // [1, 2, 3, 4, 5]

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };   // { a: 1, b: 2, c: 3 }

// Rest（收集）
function sum(...nums) {           // nums = [1, 2, 3, 4, 5]
    return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4, 5);             // 15

Map 與 Set

// Map — 任何值都可以當 key
let map = new Map();
map.set("name", "小明");
map.set(42, "數字 key");
map.set(true, "布林 key");

console.log(map.get("name"));   // "小明"
console.log(map.size);          // 3
console.log(map.has(42));       // true
map.delete(true);

// 遍歷
for (let [key, value] of map) {
    console.log(`${key}: ${value}`);
}

// Set — 不重複的集合
let set = new Set([1, 2, 2, 3, 3, 3]);
console.log(set);               // Set {1, 2, 3}
console.log(set.size);          // 3

// 陣列去重複
let arr = [1, 1, 2, 2, 3];
let unique = [...new Set(arr)]; // [1, 2, 3]

類別（Class）

class Animal {
    // 建構子
    constructor(name, sound) {
        this.name = name;       // ← 實例屬性
        this.sound = sound;
    }

    // 方法
    speak() {
        return `${this.name} 說 ${this.sound}`;
    }

    // 靜態方法（用 Animal.create() 呼叫）
    static create(name, sound) {
        return new Animal(name, sound);
    }
}

// 繼承
class Dog extends Animal {
    constructor(name) {
        super(name, "汪汪");    // ← 呼叫父類建構子
    }

    // 覆寫方法
    speak() {
        return `🐕 ${super.speak()}！`;
    }

    // 新方法
    fetch(item) {
        return `${this.name} 撿回了 ${item}`;
    }
}

let dog = new Dog("旺財");
console.log(dog.speak());      // "🐕 旺財 說 汪汪！"
console.log(dog.fetch("球")); // "旺財 撿回了 球"

模組（Modules）

// math.js — 匯出
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export default class Calculator { /* ... */ }

// app.js — 匯入
import Calculator, { add, subtract } from './math.js';
// default export 不用大括號
// named export 用大括號

import * as math from './math.js';  // 匯入全部
math.add(1, 2);

<!-- HTML 中使用模組 -->
<script type="module" src="app.js"></script>

其他實用特性

// Optional Chaining（?.）
let city = user?.address?.city;    // undefined（不報錯）

// Nullish Coalescing（??）
let name = user?.name ?? "訪客";  // null/undefined 才用預設值

// 邏輯賦值
x ||= 10;   // x 是 falsy 就設為 10
x ??= 10;   // x 是 null/undefined 就設為 10
x &&= 10;   // x 是 truthy 就設為 10

// Array.at()（負數索引）
let arr = [1, 2, 3, 4, 5];
arr.at(-1);  // 5（最後一個）
arr.at(-2);  // 4（倒數第二個）

// structuredClone（深拷貝）
let original = { a: 1, b: { c: 2 } };
let deep = structuredClone(original);
deep.b.c = 99;
console.log(original.b.c);  // 2（原始不受影響）