TC39：Map 對象是鍵/值對的集合，其中鍵和值可以是任意的 ECMAScript 語言值。

讓我們創(chuàng)建新的 map 對象。

// 使用 constructor
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我們可以使用實例方法 set
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

現(xiàn)在讓我們使用 object.fromEntries 將 map 轉(zhuǎn)換成一個對象

Object.fromEntries(map) // { key 1: "value 1", key 2: "value 2"}

其他類型

嘗試將其他數(shù)據(jù)類型傳遞到 Object.fromEntries 時要小心。以下所以列出的所有情況將一致拋出一個錯誤：

注意：確保只傳遞一個鍵值對。

Object.fromEntries 和 Object.entries

Object.entries 方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組。

const object = { key1: 'value1', key2: 'value2' }
const array = Object.entries(object) // [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array) // { key1: 'value1', key2: 'value2' }

對象到對象轉(zhuǎn)換

你可以在最初的 TC39 提案 找到引入 Object.entries 方法的緣由。

通常，當(dāng)我們選擇使用 Object.entries 時，是因為它讓我們能夠訪問一些漂亮的數(shù)組方法。

const user = {
  name: 'O.O',
  age: 18,
  address: 'xxx'
}

console.log(Object.entries(user).filter(([key, value]) => key !== 'age'))
// [["name", "O.O"], ["address", "xxx"]]

它返回了一組嵌套數(shù)組，而不是我們想要的對象轉(zhuǎn)對象，后面又引入了 fromEntries 方便該操作。

const arr = [["name", "O.O"], ["address", "xxx"]]
console.log((Object.fromEntries(arr)) // {name: "O.O", address: "xxx"}
            
const user = {
  name: 'O.O',
  age: 18,
  address: 'xxx'
}

Object.fromEntries(Object.entries(user).filter(([key, value]) => key !== 'age'))
// {name: "O.O", address: "xxx"}

瀏覽器支持情況

除了 IE，大多數(shù)主流瀏覽器都支持這種方法：

Object.fromEntries()

替代方案

Object.fromEntries 于2019年推出，所以它仍然是相當(dāng)新的的一個方法。因此，在照顧舊瀏覽器的情況下，我們需要其他的替代方案，將一個鍵值對數(shù)組轉(zhuǎn)化為一個對象以更好的支持。

Reduce

將數(shù)組轉(zhuǎn)換為對象的一種常用方法是使用 reduce 方法

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {}
  )
}

toObject(array) // { key1: 'value1', key2: 'value2' }
toObject(map) // { key1: 'value1', key2: 'value2' }

Underscore 和 Lodash

Underscore 和 Lodash 也可將鍵值對轉(zhuǎn)換為對象。

_.object — 將陣列轉(zhuǎn)換為對象。傳遞單個[鍵、值]對列表，或鍵列表和值列表。

// Underscore
const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array) // { key1: 'value1', key2: 'value2' }

_.fromPairs — 此方法返回由鍵值對組成的對象。文章來源地址http://www.zghlxwxcb.cn/news/detail-430203.html

// Lodash
const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.fromPairs(array) // { key1: 'value1', key2: 'value2' }