點燈坊

學而時習之,不亦悅乎

使用 Object.entries() 將 Object 轉成 Array

Sam Xiao's Avatar 2019-11-27

由於 ECMAScript 提供了 Object Literal,因此建立 Object 非常簡單,特別適合將 Function 的 Argument 以 Object 表示,又由於 ECMAScript 的 Object 與 Array 非常類似,若能將 Object 轉成 Array,就能善用 Array.prototype 下豐富的 Method。

Version

macOS Catalina 10.15.1
VS Code 1.40.1
Quokka 1.0.261
ECMAScript 2017

Object.entries()

let data = {
  a: 'test1',
  b: 'test2',
  c: 'test3'
}

let fn = obj => Object.entries(obj).reduce((a, [k, v]) => a += k + v, '')

fn(data) // ?

data 為 object,我們希望 object 的所有 key 與 value 能串起來成為單一 string。

由於最後結果為單一 string,因此適合用 reduce(),但 reduce() 為 array 的 method,因此勢必要將 object 轉成 array。

由於我們同時需要 key 與 value,因次適合使用 Object.entries() 將 object 轉成 array。

Object.entries()
{k: v} -> [[k, v]...]
將 object 轉成 key / value 所構成的 array

object000

Conclusion

  • Object.entries() 為 ES2017 較新的 method,不過目前 Babel 與 Node 都已經支援,可安心使用

Reference

MDN, Object.entries()