Map 與對象之間的相互轉換

by @zhangbao(zhangbao) #0108

這裏所謂的「對象」是指使用相似 var obj = {} 或 var obj = new Object() 等方式聲明的普通對象。

概覽

• 從對象轉爲 Map ：new Map(Object.entries(obj))
• 從 Map 轉爲對象：Object.fromEntries(map.entries())

Map 的兩種建立方式

咱們建立 Map 時，除了下面這種方式

還可使用 new Map(iterable) 語法：

傳入的數組參數，是由一個個鍵值對（[key, value]）組成的。這種建立方式，比使用 map.set 更加簡潔和方便。

map.entries()

上面的一個個 [key, value] 又稱爲 entry。咱們能行 entries 獲得 map，那麼也能從 map 獲得 entries。須要使用 Map.prototype.entries() 這個 Map 實例上定義的方法。

仍是以上面的變量 map 舉例：

map.entries() 獲得的結果是是一個迭代對象（MapIterator）。藉助 Array.from 能夠將迭代對象轉爲真實數組。

那麼，問題來了——Map 與對象之間是如何相互轉換的呢？答案是藉助 entries 這個數據結構。

所以，咱們先來認識一下 Object.entries 方法。

Object.entries

顧名思義，Object.entries 是用來將一個對象轉爲 entries 結構形式的。

下面舉一個例子：

這樣，咱們就能從一個對象獲得它的 entries 結構形式了。再帶入 new Map()：

如今就完成了「對象 -> Map」的轉換了。

💡 提示： 值得注意的是，因爲對象屬性類型的限制（即對象屬性名類型只能是字符串或 Symbol 值）。從對象轉成 Map 時，Map key 的類型最多隻會有兩種：字符串或 Symbol 值。

Object.fromEntries

有 Object.entries，就有 Object.fromEntries。後者正是前者的反向操做。語法以下：

Object.fromEntries(iterable)
複製代碼

舉個例子：

固然，上面的演示很是無聊。正兒八經得與 map.entries 結合使用才方便呢。

與 map.entries 結合使用：

map.entries 方法上面已有介紹。此方法用來將 Map 轉爲迭代對象的表現形式。

let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

Object.fromEntries(map.entries())
// {
// "1": "num1",
// "true": "bool1"
// }
複製代碼

從上面的轉換爲對象的結果中，咱們能夠看見 ['1', 'str1'] 這個鍵值對消失了，保留下來的是 [1, 'num1']。並且 1 也變爲 "1" 了。緣由在於，對象的屬性名只能是字符串或 Symbol 值兩種，這是與 Map 的 key 不一樣的地方（Map 的 key 能夠是任意類型的）。在從「Map -> 對象」的過程當中，因此非 Symbol 類型的 key 最終都會被 Object.fromEntries 方法處理，轉爲字符串的表現形式。

（完）