ECMAScript 2017 (ES8) 裡歷遍 Object 的新方法

在 ES8(對,ES8 出一陣子了……)裡面新增了一些常用於歷遍 Object 的新方法 —— Object.valuesObject.entries,這裡稍微記錄一下該怎麼用……

Object.values

在 ES7 及更早之前我們如果想要列舉一個 Object 裡面的欄位值我們可能會用下面的方法:

const example = { a: 1, b: 2 }
Object.keys(example).map(_ => example[_]) // => [1, 2]

Object.values1 會回傳物件本身可列舉(enumerable)的所有欄位值,其順序會與 for...in2 迴圈還有 Object.keys3 一樣。

Method Signature

Object.values 的方法簽名大概是長這樣:

Object.values(value : any) : Array<any>

範例

const example = { a: 1, b: 2 }
Object.values(example) // => [1, 2]

Object.entries

然而,我們有時候會需要同時列舉鍵與值,這時候 Object.entries4 就派上用場了,他會回傳一個二維陣列,其中的元素會以 [鍵, 值] 來表示每一個欄位的鍵值關係,與下列的結果是相同的:

const example = { a: 1, b: 2 }
Object.keys(example).map(_ => [_, example[_]]) // => [['a', 1], ['b', 2]]

Method Signature

Object.values 的方法簽名大概是長這樣:

Object.entries(value : any) : Array<[string, any]>

範例

const example = { a: 1, b: 2 }
Object.entries(example) // => [['a', 1], ['b', 2]]

// 搭配解構賦值(Destructuring assignment)服用效果更好
Object.entries(example)
      .forEach(([key, value]) => console.log(`example.${key} = ${value}`))
// > example.a = 1
// > example.b = 2

  1. 詳見 MDN 上的詳細說明《Object.values() - JavaScript | MDN》 
  2. 詳見 MDN 上的詳細說明《for...in - JavaScript | MDN》 
  3. 詳見 MDN 上的詳細說明《Object.keys() - JavaScript | MDN》 
  4. 詳見 MDN 上的詳細說明《Object.entries() - JavaScript | MDN》 
因主題更新,留言功能暫時停用中。