你知道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，第一时间阅读最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！