你知道Object.entries()，但你還知道有Object.fromEntries()嗎？

object.entries() 轉換一個objec爲array。可是，若是你想作相反的事情怎麼辦？不用再想了！ 使用 Object.fromEntries() 來把array轉換爲object 👏。

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

Object.fromEntries

咱們先指出對象的解剖方法，對象是有一個鍵和一個值的東西。

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

若是咱們想將某物轉換爲對象，咱們須要傳遞具備這兩個要求的東西：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轉爲對象

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

讓咱們建立新的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 時，請當心，全部這些都會拋出一個錯誤 🚨

❌未捕獲的類型錯誤（Uncaught 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' }

Object到Object的轉換

若是你閱讀了原始的TC39提案，這就是引入此新方法的緣由。隨着 Object.entries 的引入，沒有一種簡單的方法能夠將結果轉換回對象。

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

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };
// 😖 Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "🥦"], ["carrot", "🥕"] ]

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

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

瀏覽器支持

除了Internet Explorer，大多數主流瀏覽器都支持此方法 👍。

---

來源：https://medium.com/@samanthaming，做者：Samantha Ming，翻譯：公衆號《前端全棧開發者》

本文首發於公衆號《前端全棧開發者》ID：by-zhangbing-dev，第一時間閱讀最新文章，會優先兩天發表新文章。關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！