在前一篇我們介紹了：
let、const、箭頭函式、模板字面值（Template Literal）、模組化（import / export）。

今天要接著看的是 ES6 其他的特性
能讓我們在操作陣列、物件、參數時寫出更簡潔、更語意化的程式碼。

解構賦值（Destructuring Assignment）

• 「直接從陣列或物件中拆出所需的值」，不必再一個一個指定。

陣列解構

const [a, b] = [10, 20];
console.log(a, b); // 10 20

物件解構

const person = { name: "Kenneth", age: 30 };
const { name, age } = person;
console.log(name, age); // Kenneth 30

也可以設定預設值或改變變數名稱：

const user = { name: "Jean" };
const { name, age = 18 } = user;
console.log(name, age); // Jean 18

const { name: userName } = user;
console.log(userName); // Jean

甚至可以在函式參數中直接使用解構：

function greet({ name, age }) {
  console.log(`Hi, I’m ${name}, ${age} years old.`);
}

const person = { name: "Kenneth", age: 30 };
greet(person);

• 程式更短更清楚
• 函式參數可以直接取值
• 不必再寫多行取出物件屬性的程式碼

展開運算子（Spread Operator）與剩餘參數（Rest Parameter）

這兩個語法看起來一樣 (...)，但用途完全相反：
Spread 是「展開」，Rest 是「收集」。

展開運算子（Spread）

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a:1, b:2, c:3 }

• 合併陣列或物件
• 複製資料（注意是淺拷貝）
• 傳遞多個參數給函式

const numbers = [3, 5, 9];
console.log(Math.max(...numbers)); // 9

剩餘參數（Rest）

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

• ...nums 會把所有傳入的參數「收集」成一個陣列。
  這對不定數量的參數特別方便。

增強物件語法（Enhanced Object Literals）

ES6 也讓物件的撰寫更簡潔、更動態。
可以不用重複寫 key: value，
也能在建立物件時用變數當屬性名稱。

屬性縮寫（Property shorthand）

const name = "Kenneth";
const age = 30;

// 傳統寫法
const user1 = { name: name, age: age };

// ES6 簡寫
const user2 = { name, age };
console.log(user2); // { name: 'Kenneth', age: 30 }

計算屬性名稱（Computed Property Names）
const key = "score";
const student = { [key]: 90 };
console.log(student); // { score: 90 }

方法簡寫（Method shorthand）
const player = {
  name: "Jean",
  sayHi() {
    console.log(`Hi, I’m ${this.name}`);
  }
};
player.sayHi(); // Hi, I’m Jean

預設參數（Default Parameters）

在 ES5 中，若函式沒給參數，通常要自己檢查：

function greet(name) {
  name = name || "Guest";
  console.log(`Hello, ${name}!`);
}

ES6 可以直接在參數位置設定預設值：

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();        // Hello, Guest!
greet("Lena");  // Hello, Lena!

• 讓函式更穩定，也減少防呆程式碼。

for...of 迴圈（新迭代方式）

for...of 是 ES6 新的迴圈寫法，
可以直接遍歷「可迭代物件」（array、string、Set、Map）。

const arr = [10, 20, 30];

for (let value of arr) {
  console.log(value);
}
// 10
// 20
// 30

參考資料

• MDN Ｗeb Docs
• Udemy 2025網頁全端課程
• Lidemy課程
• ES6