JavaScript ES6 物件縮寫（Object Shorthand）介紹：給新手的指南

更新日期： 2024 年 10 月 23 日

當我們學習 JavaScript 的 ES6（ECMAScript 6）時，物件縮寫（Object Shorthand）是其中非常實用的語法功能之一，它能讓我們在定義物件時寫出更簡潔的代碼。

這篇文章將介紹，什麼是物件縮寫以及如何使用它，並進一步探討，如何結合解構賦值來更高效地處理物件。

什麼是物件縮寫？

在 JavaScript 中，物件（Object）是一組「鍵（key）」和值（value）」對組成的結構。

在 ES6 之前，我們必須手動為每個屬性明確地指定鍵和值。

但是，在 ES6 中，當變數名稱和物件屬性的鍵相同時，可以使用物件縮寫來簡化代碼，這樣我們就不需要重複書寫變數名稱。

傳統的物件定義方式

先來看看在 ES6 之前，我們是如何定義物件的：

const name = 'Alice';
const age = 25;

// 傳統的物件定義方式
const person = {
  name: name,
  age: age
};

console.log(person);
// { name: 'Alice', age: 25 }

如上所示，我們必須在物件中為每個屬性明確地指定 key: value。

即使 name 和 age 這兩個變數的名稱與鍵相同，我們仍然需要寫兩次。

使用 ES6 物件縮寫語法

在 ES6 中，如果變數名稱和物件的鍵相同，我們可以直接使用物件縮寫語法。

以下是同樣的例子，但使用了縮寫語法：

const name = 'Alice';
const age = 25;

// 使用 ES6 物件縮寫語法
const person = {
  name,
  age
};

console.log(person);
// { name: 'Alice', age: 25 }

在這裡，我們只需寫 name 和 age，JavaScript 會自動將這些變數的值賦予對應的鍵。這使得代碼更加簡潔，尤其是在我們需要將多個變數放入物件時。

方法縮寫

除了屬性縮寫外，ES6 還提供了方法的縮寫形式。

我們可以省略 function 關鍵字來定義物件中的方法：

const person = {
  name: 'Alice',
  age: 25,
  // 傳統方法定義方式
  greet: function() {
    console.log('Hello, ' + this.name);
  },
  // ES6 方法縮寫
  sayHello() {
    console.log('Hi, ' + this.name);
  }
};

person.greet(); // Hello, Alice
person.sayHello(); // Hi, Alice

如上例所示，greet 方法使用了傳統語法，而 sayHello 則使用了 ES6 方法縮寫。

兩者的功能完全一樣，但方法縮寫使代碼更加簡潔。

解構賦值

解構賦值（Destructuring Assignment）是一個 ES6 中非常強大的語法，它允許我們從物件中提取值並將它們賦值給變數。

這通常和物件縮寫搭配使用，能進一步簡化代碼。

例如：

const person = { name: 'Alice', age: 25, city: 'Taipei' };

// 解構賦值
const { name, age } = person;

// 物件縮寫
const summary = { name, age };

console.log(summary);
// { name: 'Alice', age: 25 }

這種寫法讓代碼變得更加簡潔易讀，特別是在處理大量物件屬性時非常方便。

解構賦值應用於函數

解構賦值還可以放到函數內部，甚至在函數參數中使用，這是一種非常靈活且常用的模式。當我們需要處理包含多個屬性的物件作為參數時，可以使用解構賦值來簡化函數定義。

例如，當我們有一個函數需要接收一個物件作為參數，我們可以直接在函數參數中使用解構賦值：

// 函數參數使用解構賦值
function displayPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Alice', age: 25 };

// 調用函數
displayPerson(person);
// Name: Alice, Age: 25

這樣我們就可以直接提取 name 和 age 作為函數的參數，而不需要手動在函數內部逐一提取。

解構賦值也可以與默認參數一起使用，非常適合處理選項對象或配置對象。

function createUser({ name = 'Unknown', age = 18 } = {}) {
  return {
    name,
    age
  };
}

const newUser = createUser({ name: 'Bob' });
console.log(newUser);
// { name: 'Bob', age: 18 }

在這裡，如果沒有提供 age，它將自動設置為默認值 18。

使用場合

物件縮寫和解構賦值在以下情境中非常有用：

1. 處理 API 請求結果：當從 API 獲取數據並需要將其保存到一個物件中時，這兩者能幫助我們避免重複代碼。
2. 表單數據處理：在處理表單數據時，我們常常遇到變數名稱與表單字段名稱一致的情況，這時物件縮寫與解構賦值能使代碼更加簡潔。
3. 函數參數的簡化：使用解構賦值可以簡化函數的參數定義，讓代碼更加清晰。

結論

ES6 的物件縮寫和解構賦值是兩個非常實用的語法功能。

物件縮寫能讓我們避免重複書寫變數名稱，提升代碼的簡潔性，而解構賦值則可以與縮寫搭配使用，特別是在處理複雜的數據結構時讓代碼變得更加直觀易懂。

如果你是一個新手，建議多加練習這兩個語法功能，它們不僅能提高你的代碼品質，還能讓你的 JavaScript 代碼更加高效且易於維護！

希望這篇文章能幫助你理解並使用這些強大的 ES6 語法功能！