ES9 中 Object 原型上新增的 fromEntries 方法应用详解-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的 ES9 中，Object 原型上新增了一个 fromEntries 方法，它可以将一个二维数组转换为对象。这个方法在前端开发中有很多应用，本文将详细介绍该方法的使用及其指导意义。

fromEntries 方法的语法

fromEntries 方法的语法如下：

Object.fromEntries(iterable)

其中，iterable 是一个可迭代对象，比如数组或者 Map 对象。

fromEntries 方法的作用

fromEntries 方法的作用是将一个二维数组转换为对象。这个二维数组的每一个元素都是一个键值对，第一个元素是键，第二个元素是值。fromEntries 方法会将这个二维数组转换为一个对象，其中每个键值对都对应着对象的一个属性和值。

fromEntries 方法的示例

下面是一个使用 fromEntries 方法的示例：

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj);

上面的代码中，我们定义了一个二维数组 arr，其中每个元素都是一个键值对。然后我们调用了 Object.fromEntries 方法将这个二维数组转换为一个对象 obj。最后，我们使用 console.log 方法将这个对象输出到控制台。

运行上面的代码，我们会在控制台看到以下输出：

{ a: 1, b: 2, c: 3 }

从输出结果可以看出，fromEntries 方法成功将二维数组 arr 转换为了一个对象 obj，其中每个键值对都对应着对象的一个属性和值。

fromEntries 方法的应用

fromEntries 方法在前端开发中有很多应用。下面我们将介绍一些常见的应用场景。

将 URLSearchParams 对象转换为对象

在前端开发中，我们经常需要将 URLSearchParams 对象转换为对象。URLSearchParams 对象是一个包含查询参数的对象，它通常用于处理 URL 中的查询参数。我们可以使用 fromEntries 方法将 URLSearchParams 对象转换为对象，如下所示：

const searchParams = new URLSearchParams('foo=1&bar=2');
const obj = Object.fromEntries(searchParams.entries());
console.log(obj);

上面的代码中，我们首先创建了一个 URLSearchParams 对象 searchParams，它包含了两个查询参数 foo 和 bar。然后，我们调用了 searchParams.entries 方法获取一个包含所有查询参数的迭代器。最后，我们将这个迭代器传递给 Object.fromEntries 方法，将 URLSearchParams 对象转换为了一个对象 obj。

运行上面的代码，我们会在控制台看到以下输出：

{ foo: '1', bar: '2' }

从输出结果可以看出，fromEntries 方法成功将 URLSearchParams 对象转换为了一个对象 obj。

将 Map 对象转换为对象

在前端开发中，我们经常需要将 Map 对象转换为对象。Map 对象是一种键值对的集合，它通常用于存储一些复杂的数据结构。我们可以使用 fromEntries 方法将 Map 对象转换为对象，如下所示：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const obj = Object.fromEntries(map);
console.log(obj);

上面的代码中，我们首先创建了一个 Map 对象 map，它包含了三个键值对。然后，我们调用了 Object.fromEntries 方法将 Map 对象转换为了一个对象 obj。

运行上面的代码，我们会在控制台看到以下输出：

{ a: 1, b: 2, c: 3 }

从输出结果可以看出，fromEntries 方法成功将 Map 对象转换为了一个对象 obj。

将数组转换为对象

在前端开发中，我们经常需要将数组转换为对象。有时候我们的数据是以数组的形式存在的，但是我们需要将它们转换为对象来方便我们的处理。我们可以使用 fromEntries 方法将数组转换为对象，如下所示：

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj);

运行上面的代码，我们会在控制台看到以下输出：

{ a: 1, b: 2, c: 3 }

从输出结果可以看出，fromEntries 方法成功将数组 arr 转换为了一个对象 obj。

总结

ES9 中新增的 Object.fromEntries 方法可以将一个二维数组转换为对象。它在前端开发中有很多应用场景，比如将 URLSearchParams 对象转换为对象、将 Map 对象转换为对象、将数组转换为对象等。掌握了这个方法的使用，我们在前端开发中的数据处理能力将得到大大提升。

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