ECMAScript 2021 (ES12) 中的 Object.fromEntries 方法解决对象转为 Map 数据结构问题-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，对象和 Map 是两种常见的数据结构。对象以键值对的形式存储数据，而 Map 则是以二元组的形式存储数据，其中每个二元组包含一个键和一个值。虽然这两种数据结构都有其适用的场景，但有时我们需要将一个对象转为 Map，以便于处理和操作。ECMAScript 2021 (ES12) 中的 Object.fromEntries 方法为我们解决了这个问题。

Object.fromEntries 方法简介

Object.fromEntries 方法是 ECMAScript 2019 (ES10) 引入的新特性，用于将一个由键值对组成的数组转为一个对象。

const entries = [['name', 'Alice'], ['age', 21]];
const obj = Object.fromEntries(entries);

console.log(obj); // {name: "Alice", age: 21}

在 ECMAScript 2021 (ES12) 中，Object.fromEntries 方法被扩展，可以将一个对象转为 Map。

const obj = {name: 'Alice', age: 21};
const map = new Map(Object.entries(obj));

console.log(map); // Map(2) {"name" => "Alice", "age" => 21}

虽然上面的方法可以将一个对象转为 Map，但是它需要经过两个步骤：先用 Object.entries 方法将对象转为由键值对组成的数组，然后再用 Map 构造函数将数组转为 Map。ECMAScript 2021 (ES12) 中的 Object.fromEntries 方法直接将对象转为 Map，使得代码更为简洁，可读性更高。

const obj = {name: 'Alice', age: 21};
const map = new Map(Object.entries(obj));
// 等价于
const map = Object.fromEntries(Object.entries(obj));

Object.fromEntries 方法的深入理解

在上面的示例代码中，我们已经介绍了 Object.fromEntries 方法的基本用法。现在让我们更深入地理解这个方法。

Object.entries 方法

首先我们来了解一下 Object.entries 方法。

Object.entries 方法返回一个给定对象自身可枚举属性键值对数组，其排列顺序与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环枚举原型链中的属性）。

const obj = {name: 'Alice', age: 21};
const entries = Object.entries(obj);

console.log(entries); // [["name", "Alice"], ["age", 21]]

从上面的代码可以看出，Object.entries 方法将一个对象转为由键值对组成的数组。这个数组中每个元素都是一个包含键和值的二元组。

Object.fromEntries 方法

接下来我们来了解一下 Object.fromEntries 方法。

Object.fromEntries 方法接收一个形如 [key, value] 的键值对数组，然后返回一个新对象，对象的属性对应于这些键值对。简单来说，它的作用就是将一个由键值对组成的数组转为一个对象。

const entries = [['name', 'Alice'], ['age', 21]];
const obj = Object.fromEntries(entries);

console.log(obj); // {name: "Alice", age: 21}

注意，Object.fromEntries 方法会自动将数组中的键和值进行类型转换。

Object.fromEntries 方法与 Map

有了上面的基础知识，我们就可以更好地理解 Object.fromEntries 方法将对象转为 Map 的实现了。

const obj = {name: 'Alice', age: 21};
const map = Object.fromEntries(Object.entries(obj));

console.log(map); // Map(2) {"name" => "Alice", "age" => 21}

从上面的代码可以看出，我们首先使用 Object.entries 方法将对象转为键值对数组，然后使用 Object.fromEntries 方法将数组转为 Map。

注意，Object.fromEntries 方法返回的是一个新的对象，而不是原对象的引用。因此，使用 Object.fromEntries 方法将对象转为 Map 不会影响原对象。

Object.fromEntries 方法的应用

Object.fromEntries 方法主要用于将对象转为 Map。它可以简化代码，提高可读性。

// 传统写法
const obj = {name: 'Alice', age: 21};
const map = new Map(Object.entries(obj));

// 新写法
const obj = {name: 'Alice', age: 21};
const map = Object.fromEntries(Object.entries(obj));

除了上面介绍的将对象转为 Map 的场景之外，Object.fromEntries 方法还可以用于将数组转为对象。这个应用场景在处理 REST API 数据时非常有用。

const response = {id: 1, name: 'Alice', age: 21};
const props = ['id', 'name', 'age'];
const data = Object.fromEntries(props.map(prop => [prop, response[prop]]));

console.log(data); // {id: 1, name: "Alice", age: 21}

从上面的代码可以看出，我们首先定义了一个 REST API 响应结果，然后定义了一个属性数组，最后使用 Object.fromEntries 方法将数组转为一个对象，对象的属性名与属性数组中的元素一一对应，属性值则取自 REST API 响应结果中对应的属性值。

总结

Object.fromEntries 方法是 ECMAScript 2021 (ES12) 引入的新特性，用于将一个对象转为 Map。它可以简化代码，提高可读性。在使用 Object.fromEntries 方法时，需要注意它会自动将数组中的键和值进行类型转换，返回的是一个新的对象，而不是原对象的引用。除了将对象转为 Map 的场景之外，Object.fromEntries 方法还可以用于将数组转为对象，在处理 REST API 数据时非常有用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652bcd0b7d4982a6ebda8c7a