【譯】關於Object.fromEntries

原文：v8.dev/features/ob…
做者：Mathias Bynens
翻譯：前端小白

Object.fromEntries 是javascript Object 對象新增的一個很是實用的方法。在解釋它的功能以前，咱們先了解下已經存在的 Object.entries API

Object.entries

Object.entries 已經出現一段時間了，

瀏覽器支持（瞭解更多）：

對於對象中的每一個鍵值對，Object.entries 提供一個數組，其中第一個元素是鍵，第二個元素是值。

Object.entries 與 for-of 結合起來特別有用，由於它使您可以很是優雅地遍歷對象中的全部鍵值對

const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`The value of ${key} is ${value}.`);
}
// Logs:
// The value of x is 42.
// The value of y is 50.
複製代碼

可是，到目前爲止尚未一個簡單的方法，能夠從 entries 獲得和它相對應的 object

Object.fromEntries

Object.fromEntries 這個新的API實現了與 Object.entries 相反的操做。這使得根據對象的 entries 很容易獲得 object

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }
複製代碼

一個常見的用法就是轉換對象。如今能夠經過遍歷它的 entries，而後使用您可能已經熟悉的數組方法來實現這一點

const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) => key.length === 1)
    .map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }
複製代碼

在上面例子中，咱們對對象進行過濾，獲得長度爲1的 key ，即 x 和 y，而不是 abc。而後經過 map 獲得更新後的鍵值對。在本例中，咱們將每一個值乘以2，使其翻倍。最終的結果是一個新對象，只有屬性x和y，以及新值。

Objects vs. maps

JavaScript還支持Map，這一般是比常規對象更合適的數據結構。因此當你能夠徹底控制的代碼時，你能夠使用映射而不是對象。然而，做爲開發人員，您並不老是可以選擇哪一種形式。有時，您正在操做的數據來自外部API或庫函數，這些函數提供對象而不是映射。

Object.entries 使從 objects 到 maps 很是簡單

const object = { language: 'JavaScript', coolness: 9001 };

// Convert the object into a map:
const map = new Map(Object.entries(object));
複製代碼

反過來也一樣有用:當你的代碼使用 map，你也可能須要在某個時候序列化您的數據，例如將其轉換爲JSON以發送API請求。或者，您可能須要將數據傳遞給另外一個庫，該庫指望對象而不是映射。在這些狀況下，您須要基於映射數據建立一個對象。Object.fromEntries 使其變得很簡單

// Convert the map back into an object:
const objectCopy = Object.fromEntries(map);
// → { language: 'JavaScript', coolness: 9001 }
複製代碼

Object.entries 和 Object.fromEntries 這兩個方法讓咱們很容易在 maps 和 objects 之間相互轉換

警告：當心數據丟失

當將映射轉換爲像上面例子中那樣的普通對象時，有一個隱含的假設，即每一個鍵都是唯一字符串化的。若是這個假設不成立，就會發生數據丟失

const map = new Map([
  [{}, 'a'],
  [{}, 'b'],
]);
Object.fromEntries(map);
// → { '[object Object]': 'b' }
// Note: the value 'a' is nowhere to be found, since both keys
// stringify to the same value of '[object Object]'.
複製代碼

因此在咱們使用 Object.fromEntries 或者其餘方法將 map 轉換爲 object 以前，確保 map 的鍵產生惟一的 toString 結果。

Object.fromEntries 瀏覽器支持

瞭解更多

5個 ES2019 新特性

• Object.fromEntries()
• trimStart()
• trimEnd()
• flat()
• flatMap()

參考：blog.logrocket.com/5-es2019-fe…