iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 15

Day15【ES6 小筆記】物件縮寫好棒棒!Object literal extension

  • 分享至 

  • xImage
  •  

javascript ES6 物件擴展範例 object literal extension
在 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)


上一篇
Day14【ES6 小筆記】用 ES6 跟 CSS 做一個調皮的標題
下一篇
Day16【ES6 小筆記】// javascript 怎麼下個好註解?
系列文
透過 ESLint 練習 JavaScript ES630
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言