詳解 ES10 中 Object.fromEntries() 的緣起

作者：前端小智 2020-06-24 08:27:36

我們知道 Object.entries() 是將對(duì)象轉(zhuǎn)成一個(gè)自身可枚舉屬性的鍵值對(duì)數(shù)組。同樣，我們也可以把鍵值對(duì)數(shù)組轉(zhuǎn)成了對(duì)象。

const keyValuePair = [ 
  ['cow', '🐮'], 
  ['pig', '🐷'], 
] 
 
Object.fromEntries(keyValuePair); 
// { cow: '🐮', pig: '🐷' }

Object.fromEntries

我們知道，對(duì)象結(jié)構(gòu)是一個(gè)是有鍵和值組合體，如下所示：

const object = { 
  key: 'value', 
};

基于這個(gè)邏輯，如果我們想將某個(gè)東西轉(zhuǎn)成對(duì)象，就必須要傳遞鍵和值。

有兩種類(lèi)型的參數(shù)可以滿足這些要求：

具有嵌套鍵值對(duì)的數(shù)組
Map 對(duì)象

使用 Object.fromEntries 將數(shù)組轉(zhuǎn)成對(duì)象

下面是個(gè)鍵-值對(duì)嵌套數(shù)組

const nestedArray = [ 
  ['key 1', 'value 1'], 
  ['key 2', 'value 2'] 
]

使用Object.fromEntries可以將該數(shù)組轉(zhuǎn)成對(duì)象:

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

使用 Object.fromEntries 將 Map 轉(zhuǎn)成對(duì)象

ES6 為我們帶來(lái)了一個(gè)名為 map 的新對(duì)象，它與對(duì)象非常相似。

TC39：映射對(duì)象是鍵/值對(duì)的集合，其中鍵和值都可以是任意 ECMAScript 語(yǔ)言值。

我們來(lái)創(chuàng)建一個(gè) Map 對(duì)象：

// 使用構(gòu)造函數(shù) 
const map = new Map([ 
  ['key 1', 'value 1'], 
  ['key 2', 'value 2'] 
]) 
 
// 或者我們可以使用實(shí)例方法“set” 
const map = new Map() 
map.set('key 1', 'value 1') 
map.set('key 2', 'value 2') 
 
// 結(jié)果 
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

讓我們使用Object.fromentries將 map 轉(zhuǎn)換為一個(gè)對(duì)象

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

對(duì)象的類(lèi)型錯(cuò)誤：試圖使用 Object.fromEntries 將其它類(lèi)型轉(zhuǎn)成對(duì)象

將下面的類(lèi)型傳入 Object.fromEntries 都會(huì)導(dǎo)致報(bào)錯(cuò) caught TypeError。

確保傳遞值要有鍵-值對(duì)。

Object.fromEntries vs Object.entries

Object.fromEntries 是 Object.entries 反向。 Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，而Object.fromEntries() 方法把鍵值對(duì)列表轉(zhuǎn)換為一個(gè)對(duì)象。

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

對(duì)象到對(duì)象的轉(zhuǎn)換

如果你閱讀了 TC39 提案，這就是引入此新方法的原因。隨著Object.entries的引入之前，要將一些非對(duì)象結(jié)構(gòu)轉(zhuǎn)成對(duì)象是比較麻煩的。

通常，當(dāng)我們選擇使用Object.entries，是因?yàn)樗刮覀兡軌蛟L問(wèn)許多漂亮的數(shù)組方法，例如filter。但是在完成轉(zhuǎn)換之后，我們有點(diǎn)被該數(shù)組所困擾。

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' } 
 
// 😖 卡在這結(jié)果上... 
const vegetarian = Object.entries(food).filter( 
  ([key, value]) => key !== 'meat', 
) 
// [ ["broccoli", "🥦"], ["carrot", "🥕"] ]

好吧!我們可以利用所有這些有用的數(shù)組方法，但仍然可以返回對(duì)象。最后，從對(duì)象到對(duì)象的轉(zhuǎn)換??

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' } 
 
const vegetarian = Object.fromEntries( 
  Object.entries(food).filter(([key, value]) => key !== 'meat'), 
) 
 
// { broccoli: '🥦', carrot: '🥕' }

數(shù)組轉(zhuǎn)成對(duì)象的替代方案

Object.fromEntries是 ES10 推出來(lái)，很新，可能瀏覽器支持度還夠友好。因此，讓我們看一下如果將具有鍵值對(duì)結(jié)構(gòu)的數(shù)組轉(zhuǎn)成對(duì)象。

使用 reduce 方法將數(shù)組轉(zhuǎn)成對(duì)象

將數(shù)組轉(zhuǎn)換為對(duì)象的一種流行方法是使用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}), 
    {} 
  ) 
} 
 
 
// 結(jié)果 
// { key1: 'value1', key2: 'value2' }

使用庫(kù) 將數(shù)組轉(zhuǎn)成對(duì)象

Lodash 也提供了將鍵值對(duì)轉(zhuǎn)換為對(duì)象的方法。

_.object

將數(shù)組轉(zhuǎn)換為對(duì)象。傳遞[key, value]對(duì)的單個(gè)列表，或鍵的列表和值的列表。

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

_.fromPairs

_.fromPairs 是 _.toPairs 的反向，它的方法返回一個(gè)由鍵值對(duì)組成的對(duì)象。

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

瀏覽器支持情況

作者：Samantha Ming 譯者：前端小智來(lái)源：medium

原文：https://medium.com/@samanthaming/javascript-object-fromentries-4395660334d1

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

責(zé)任編輯：武曉燕來(lái)源：大遷世界

ES 數(shù)組對(duì)象