在 ES6 中，物件的撰寫更簡便了！可以使用縮寫的方式縮短我們的程式碼，省去的繁瑣的工作外，也能增加可讀性，今天就來一探究竟唄～

物件內屬性的簡寫

以我家兔子泡泡為例，如果我們已經建立好泡泡的相關資訊 name、age、works 到變數裡了，要整理到一個物件 bunny 時，過去我們就需要這樣寫：

const name = '泡泡';
const age = 5;
const works = '耍廢';

const bunny = {
  name: name,
  age: age,
  works: works
};
console.log(bunny); // {name: "泡泡", age: 5, works: "耍廢"}

這邊可以發現，當我們物件內的屬性名跟變數名稱一樣的時候，會需要重複寫兩次，當屬性很多的時候～就會寫到生氣，不過從今往後不用煩惱了，ES6 出來拯救了我們：當物件的屬性名稱跟變數名稱一樣的時候，可以簡化寫一次就好，像這樣：

const bunny = {
  name,
  age,
  works,
};
console.log(bunny); // {name: "泡泡", age: 5, works: "耍廢"}

耶！得到的是一樣的結果～是不是簡約多了，省去了繁瑣工作！

物件內方法的簡寫

而當我們的物件內有函式時，也可以使用簡寫的方式，直接省略 function 關鍵字及冒號:，先看看原本的寫法：

const bunny = {
  hungry: function() {
    console.log('快點餵我!')
  },
};
bunny.hungry(); // 快點餵我!

簡化後變這樣：

const bunny = {
  hungry() {
    console.log('快點餵我!');
  },
};
bunny.hungry(); // 快點餵我!

也就是把原本的 hungry: function() 縮減成 hungry() ，得到的是一樣的結果，是不是很棒！

物件的屬性名稱可以是表達式

在 ES6 中，我們可以把表達式當作屬性的名稱，只需要使用 [ ] 把屬性名包起來就可以了，例如這樣：

const bunny = {
  ['我' + '的名字是']: '泡泡',
};
console.log(bunny); // {我的名字是: "泡泡"}

透過 [ ] 的方式，我們的屬性名稱也可以放入變數，達到動態賦值給屬性名稱的效果。

const type = '品種';
const bunny = {
  [type]: '迷你兔',
};
console.log(bunny); // {品種: "迷你兔"}

實際應用

假如我們有一個物件 users，要紀錄一堆使用者的編號：

const users = {
  user1: 1,
  user2: 2,
  user3: 3,
};
console.log(users); // {user1: 1, user2: 2, user3: 3}

在這種情況下，如果我們有一百個使用者，還要一個數字一個數字設定，手真的會斷掉，這時候就可以這樣寫：

let id = 0;
const users = {
  [`user${++id}`]: id,
  [`user${++id}`]: id,
  [`user${++id}`]: id,
};
console.log(users); // {user1: 1, user2: 2, user3: 3}

像這樣就可以動態增加編號，不用一個一個手動輸入囉！！讓我們一起謝謝 ES6！

這邊也來看看 ESLint airbnb 中關於物件縮寫的撰寫規則：

3.5 使用物件方法的簡寫
3.6 使用屬性值的簡寫

也是規定物件要使用縮寫的方式哦！

參考資料
ES6 對象字面量的擴展
[筆記] JavaScript ES6 中的物件的擴展（object literal extension）