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

做者：Samantha Ming
譯者：前端小智
來源：medium

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

咱們知道 Object.entries() 是將對象轉成一個自身可枚舉屬性的鍵值對數組。一樣，咱們也能夠把鍵值對數組轉成了對象。

const keyValuePair = [
  ['cow', '🐮'],
  ['pig', '🐷'],
]

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

　Object.fromEntries

咱們知道，對象結構是一個是有鍵和值組合體，以下所示：

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

基於這個邏輯，若是咱們想將某個東西轉成對象，就必需要傳遞鍵和值。

有兩種類型的參數能夠知足這些要求：

1. 具備嵌套鍵值對的數組
2. Map 對象

使用 Object.fromEntries 將數組轉成對象

下面是個鍵-值對嵌套數組

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

使用Object.fromEntries能夠將該數組轉成對象:

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

使用 Object.fromEntries 將 Map 轉成對象

ES6 爲咱們帶來了一個名爲 map 的新對象，它與對象很是類似。

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

咱們來建立一個 Map 對象：

// 使用構造函數
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"}

讓咱們使用Object.fromentries將 map 轉換爲一個對象

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

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

將下面的類型傳入 Object.fromEntries 都會致使報錯 caught TypeError。

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

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Object.fromEntries vs Object.entries

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

const object = { key1: 'value1', key2: 'value2' }

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


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

對象到對象的轉換

若是你閱讀了 TC39 提案，這就是引入此新方法的緣由。 隨着Object.entries的引入以前，要將一些非對象結構轉成對象是比較麻煩的。

一般，當咱們選擇使用Object.entries，是由於它使咱們可以訪問許多漂亮的數組方法，例如filter。 可是在完成轉換以後，咱們有點被該數組所困擾。

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' }

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

好吧！ 咱們能夠利用全部這些有用的數組方法，但仍然能夠返回對象。 最後，從對象到對象的轉換👏

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' }

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// { broccoli: '🥦', carrot: '🥕' }

數組轉成對象的替代方案

Object.fromEntries是 ES10 推出來，很新，可能瀏覽器支持度還夠友好。 所以，讓咱們看一下若是將具備鍵值對結構的數組轉成對象。

使用 reduce 方法將數組轉成對象

將數組轉換爲對象的一種流行方法是使用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}),
    {}
  )
}


// 結果
// { key1: 'value1', key2: 'value2' }

使用 庫 將數組轉成對象

Lodash 也提供了將鍵值對轉換爲對象的方法。

_.object

將數組轉換爲對象。 傳遞 [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/@samantham...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。