ECMAScript 2019 中的实用特新：Object.fromEntries()，详解让你运用自如！

ECMAScript 2019 中的实用特新：Object.fromEntries()，详解让你运用自如！

ECMAScript 2019 中，有一个非常实用的特性：Object.fromEntries()。该特性主要用于将二维数组转换为对象。本篇文章将详细讲解 Object.fromEntries() 的用法和示例，并指导读者如何正确使用该特性。

什么是 Object.fromEntries()？

Object.fromEntries() 是 ECMAScript 2019 中新增的一个静态方法，用于将二维数组转换为对象。该方法接受一个形如 [key, value] 的二维数组，并将其转换为对象。具体语法如下：

Object.fromEntries(iterable)

其中，iterable 表示一个可迭代对象，包括数组、伪数组等。

使用 Object.fromEntries() 有什么好处？

Object.fromEntries() 为开发者在代码编写中提供了很多便利。

首先，Object.fromEntries() 使得开发者可以使用数组来初始化一个对象。在传统的方式下，创建一个对象需要手动定义每个属性并赋值，这样的代价是很高的。然而，使用 Object.fromEntries() 可以方便快捷地创建一个对象。

其次，Object.fromEntries() 可以通过一条简短的代码生成一个带有默认值的对象。例如：

const defaults = new Map([ ['width', 100], ['height', 100], ['depth', 100] ]); const settings = { ...Object.fromEntries(defaults), width: 200 }; console.log(settings); // {width: 200, height: 100, depth: 100}

上文中，先定义了一个 Map 集合，该集合包含了对象的默认属性及其默认值。然后通过 Object.fromEntries() 将 Map 集合转换成对象，紧接着再将 width 属性覆盖为 200，这样就生成了一个拥有默认属性和值的对象。

Object.fromEntries() 的应用场景

Object.fromEntries() 可以用于各种场景，以下分别讲解该方法在几个常见场景的使用方法：

场景一：将 queryString 参数转换为对象

queryString 是指在 URL 中的查询字符串，如?name=value&age=20。通常我们希望将 queryString 参数转换为对象，方便程序的处理，Object.fromEntries() 可以快捷地完成这个任务。示例代码如下：

const queryString = '?name=value&age=20'; const params = new URLSearchParams(queryString); const result = Object.fromEntries(params.entries()); console.log(result); // {name: "value", age: "20"}

以上代码先使用 URLSearchParams 对象将 queryString 参数解析成 Map 集合。接着，使用 Object.fromEntries() 将 Map 集合转换成对象。

场景二：快速合并对象

合并两个对象时，我们通常会使用 Object.assign() 方法，但是在合并多个对象时，Object.assign() 方法的使用就不太方便了。这个时候，可以使用 Object.fromEntries() 方法结合数组的 flatMap() 方法，实现快速合并多个对象的功能。示例代码如下：

const obj1 = {a: 1, b: 2}; const obj2 = {b: 3, c: 4}; const obj3 = {c: 5, d: 6};

const result = Object.fromEntries( [obj1, obj2, obj3].flatMap(Object.entries) ); console.log(result); // {a: 1, b: 3, c: 5, d: 6}

以上代码定义了三个对象 obj1、obj2、obj3，并通过 flatMap() 将这三个对象的属性和方法转换成二维数组再通过 Object.fromEntries() 将这些二维数组转换成一个新的对象。

场景三：将对象的属性名和属性值反转

有些情况下，我们需要将一个对象的属性名和属性值反转。Object.fromEntries() 可以帮助我们快捷地实现该操作。示例代码如下：

const obj = {a: 1, b: 2, c: 3}; const result = Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key])); console.log(result); // {1: "a", 2: "b", 3: "c"}

以上代码采用 Object.entries() 方法将 obj 对象的属性和方法转换成二维数组，然后使用 map() 方法将其中的属性名和属性值反转，再使用 Object.fromEntries() 方法将新的二维数组转换成一个新对象。

Object.fromEntries() 的注意事项

在使用 Object.fromEntries() 时应该特别注意以下两点。

首先，该方法只适用于具备 Iterator 接口的对象。（如 Map、Set、Array 等）

其次，Object.fromEntries() 方法并不是每个浏览器都支持，因此在使用前应该进行检测。如果当前浏览器不支持该方法，可以使用 object-entries 或 object.fromentries 这个库，该库提供了相应的 polyfill，可以在较老的浏览器中实现相同的效果。

结语

Object.fromEntries() 是 ECMAScript 2019 中新增的一个非常实用的方法，开发者可以使用它将二维数组快速转换为对象，从而减少代码量和提升开式效率。本文介绍了 Object.fromEntries() 的用法及使用场景，希望可以帮助读者更好地掌握和运用该特性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7f28ce46428fe9eda7091