ES10 中的 Object.fromEntries 方法详解-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 语言的不断发展，ES10 中新增了一些非常实用的方法，其中 Object.fromEntries() 就是其中之一。这个方法主要用于将一个键值对数组转换为一个对象。在本文中，我们将详细讲解 Object.fromEntries() 的用法、示例以及其在前端开发中的应用。

什么是 Object.fromEntries()？

Object.fromEntries() 方法是 ES10 中新增的一个静态方法，它可以将一个键值对数组转换为一个对象。这个方法的主要作用是将键值对数组转换为一个对象，其中数组中的每个元素都包含一个键和一个值。

它的语法如下：

Object.fromEntries(iterable)

其中，iterable 是一个可迭代对象，包含若干个键值对。这个可迭代对象可以是一个数组、一个 Set 对象或者一个 Map 对象。

Object.fromEntries() 的使用示例

下面是一个使用 Object.fromEntries() 的示例，假设我们有一个键值对数组，我们想将它转换为一个对象：

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];
const obj = Object.fromEntries(entries);
console.log(obj);

运行上面的代码，我们会得到如下输出：

{ name: "John", age: 30, city: "New York" }

Object.fromEntries() 在前端开发中的应用

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

将 URL 参数转换为对象

在前端开发中，我们经常需要将 URL 参数转换为一个对象。假设我们有一个 URL：

https://example.com/?name=John&age=30&city=New%20York

我们可以使用 URLSearchParams 对象来解析这个 URL，然后使用 Object.fromEntries() 方法将解析后的结果转换为一个对象：

const params = new URLSearchParams(window.location.search);
const obj = Object.fromEntries(params.entries());
console.log(obj);

运行上面的代码，我们会得到如下输出：

{ name: "John", age: "30", city: "New York" }

将 FormData 对象转换为对象

在前端开发中，我们经常需要将 FormData 对象转换为一个对象。假设我们有一个 FormData 对象：

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);
formData.append('city', 'New York');

我们可以使用 Object.fromEntries() 方法将这个 FormData 对象转换为一个对象：

const obj = Object.fromEntries(formData.entries());
console.log(obj);

运行上面的代码，我们会得到如下输出：

{ name: "John", age: 30, city: "New York" }

将 Map 对象转换为对象

在前端开发中，我们经常需要将 Map 对象转换为一个对象。假设我们有一个 Map 对象：

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.set('city', 'New York');

我们可以使用 Object.fromEntries() 方法将这个 Map 对象转换为一个对象：

const obj = Object.fromEntries(map.entries());
console.log(obj);

运行上面的代码，我们会得到如下输出：

{ name: "John", age: 30, city: "New York" }

总结

Object.fromEntries() 方法是 ES10 中新增的一个非常实用的方法，它可以将一个键值对数组转换为一个对象。在前端开发中，它有很多实际应用场景，比如将 URL 参数、FormData 对象或者Map 对象转换为一个对象。希望本文对你有所帮助，让你更好地掌握 Object.fromEntries() 方法的使用。

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