JavaScript 物件解構（Object Destructuring）

基本用法

// 用 {} 把物件的屬性取出並賦值給變數
const user = { name: "Jack", age: 25 };

const { name, age } = user;
console.log(name); // "Jack"
console.log(age);  // 25

解構時重新命名變數

const user = { name: "Jack", age: 25 };

// 將 name 解構成 userName，age 解構成 userAge
const { name: userName, age: userAge } = user;
console.log(userName); // "Jack"
console.log(userAge);  // 25

解構時設定預設值

const user = { name: "Jack" };

// 若 user 中沒有 age 屬性，則使用預設值 30
const { name, age = 30 } = user;
console.log(name); // "Jack"
console.log(age);  // 30

解構巢狀物件

const user = {
  name: "Jack",
  address: {
    city: "Taipei",
    zip: "100"
  }
};

// 直接解構 address 物件中的 city 和 zip
const {
  address: { city, zip }
} = user;

console.log(city); // "Taipei"
console.log(zip);  // "100"

若需要保留整個 address 屬性本身，也可同時解構：

const { address, address: { city, zip } } = user;

在函式參數中使用解構

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

const user = { name: "Jack", age: 25 };
greet(user); // "Hello, Jack! You are 25 years old."

可以搭配預設值，處理部分參數未傳入的情況：

function greet({ name = "Guest", age = 18 } = {}) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}
greet(); // "Hello, Guest! You are 18 years old."

使用 Rest 取得剩餘屬性

const user = { name: "Jack", age: 25, gender: "male" };

// name 被取出，剩下的屬性放入 rest
const { name, ...rest } = user;

console.log(name); // "Jack"
console.log(rest); // { age: 25, gender: "male" }

解構陣列中的物件

const users = [
  { name: "Jack", age: 25 },
  { name: "Tom", age: 30 }
];

// 解構第一個物件的 name 和 age
const [{ name: firstUserName, age: firstUserAge }] = users;

console.log(firstUserName); // "Jack"
console.log(firstUserAge);  // 25

const users = [
  { name: "Jack", age: 25 },
  { name: "Tom", age: 30 }
];

// 分別解構第一位的 name，第二位的 age
const [{ name: firstUserName }, { age: secondUserAge }] = users;

console.log(firstUserName);  // "Jack"
console.log(secondUserAge);  // 30

補充說明

  • 解構只會根據變數名稱或指定別名來對應屬性名稱，若屬性不存在則會是 undefined 或使用預設值。
  • 物件解構是非破壞性的，不會改變原始物件內容。
  • 函式參數解構與預設值常搭配用來提高函式的容錯性與可讀性。