本篇文章帶大家詳細(xì)了解一下ES10中的Object.fromEntries()。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

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

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

Object.fromEntries

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

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

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

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

• 具有嵌套鍵值對的數(shù)組

• Map 對象

【推薦學(xué)習(xí)：javascript高級教程】

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

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

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

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

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

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

ES6 為我們帶來了一個名為 map 的新對象，它與對象非常相似。

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

我們來創(chuàng)建一個 Map 對象：

// 使用構(gòu)造函數(shù) 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')  // 結(jié)果 Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

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

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

對象的類型錯誤：試圖使用 Object.fromEntries 將 其它類型 轉(zhuǎn)成對象

將下面的類型傳入 Object.fromEntries 都會導(dǎo)致報錯 caught TypeError。

確保傳遞值要有鍵-值對。

Object.fromEntries vs Object.entries

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

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的引入之前，要將一些非對象結(jié)構(gòu)轉(zhuǎn)成對象是比較麻煩的。

通常，當(dāng)我們選擇使用Object.entries，是因為它使我們能夠訪問許多漂亮的數(shù)組方法，例如filter。 但是在完成轉(zhuǎn)換之后，我們有點被該數(shù)組所困擾。

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

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

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

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

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

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

將數(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}),     {}   ) }   // 結(jié)果 // { key1: 'value1', key2: 'value2' }

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

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

_.object

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

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

_.fromPairs

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

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

瀏覽器支持情況

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

作者：Shadeed