前言

在 JavaScript 中最常用的資料結構非 object 莫屬。想要建立一個 object 除了透過 new Object()，使用 object literal(物件實字) 則可以在建立的同時設定屬性與方法，加上 ES6 提出的 object literal extension(物件實字擴充)，使得 object literal 的建立方式更簡潔、更方便。讓我們來體驗一下吧！

屬性簡寫

當屬性名稱和屬性值相同時，原本的寫法：

const name = 'Lucky';

const dog = {
  name: name,
  breed: 'Corgi'
}

有了 object literal extension 後的寫法：

const name = 'Lucky';

const dog = {
  name,
  breed: 'Corgi'
};

以上程式碼中，屬性名稱與屬性值的變數名稱皆為 name，因此可以將其簡寫。

方法簡寫

設定 object 的方法時，原本的寫法：

const dog = {
  name: 'Lucky',
  bark: function(){
    console.log('Woof!Woof!');
  }
}

有了 object literal extension 後的寫法：

const dog = {
  name: 'Lucky',
  bark() {
    console.log('Woof!Woof!');
  }
}

以上程式碼中，設定 object 的方法可以省去冒號以及 function 關鍵字，函式名稱後面直接接上括號以及函式內容即可。

動態屬性名稱

若屬性名稱為變數，原本是無法直接透過 object literal 於建立 object 時就直接設定該屬性，只能在建立 object 之後再設定，例如：

const key = 'owner';

const dog = {
  name: 'Lucky',
  breed: 'Corgi'
};

dog['key' + 1] = 'Jack';
dog['key' + 2] = 'Rose';

// 最後 dog 會是
// {
//   name: 'Lucky',
//   breed: 'Corgi',
//   owner1: 'Jack',
//   owner2: 'Rose'
// }

有了 object literal extension 後的寫法：

const key = 'owner';

const dog = {
  name: 'Lucky',
  breed: 'Corgi',
  ['key' + 1]: 'Jack',
  ['key' + 2]: 'Rose'
};

// 最後 dog 也會是
// {
//   name: 'Lucky',
//   breed: 'Corgi',
//   owner1: 'Jack',
//   owner2: 'Rose'
// }

以上程式碼中， 可以在使用 object literal 建立 object 時就直接設定動態屬性。

總結

object literal extension 讓開發者在使用 object literal 建立 object 時的語法更簡潔，包含以下：

1. 屬性簡寫
2. 方法簡寫
3. 動態屬性名稱

參考資料：

1. ES6 in Action: Enhanced Object Literals - https://www.sitepoint.com/es6-enhanced-object-literals/