理解 ES10 新特性：Object.fromEntries()-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，新增了一个方法 Object.fromEntries()，这个方法可以将一个二维数组转换成一个对象。这个方法的新特性非常实用，对于开发者来说也很重要。在本篇文章中，我们将会深入了解这个新特性，并且讲解一些实际应用场景。

理解 Object.fromEntries() 的作用

我们先看一下 Object.fromEntries() 的定义：

Object.fromEntries(iterable) 方法将键值对数组转换为对象。

这个方法的参数 iterable 表示一个包含键值对的二维数组，例如：

const arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];

调用 Object.fromEntries(arr) 方法就会将这个数组转换成一个对象：

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

你也可以和 Object.entries() 配合使用，将一个对象转换成一个键值对二维数组，然后用 Object.fromEntries() 把它再转换回来，实现类似浅拷贝的效果：

const obj = { a: 1, b: 2 };
const arr = Object.entries(obj);  // [['a', 1], ['b', 2]]
const newObj = Object.fromEntries(arr); // { a: 1, b: 2 }

这里需要注意的是，如果有重复的键名，后面的值会覆盖前面的，例如：

const arr = [
  ['a', 1],
  ['b', 2],
  ['a', 3]
];

Object.fromEntries(arr); // { a: 3, b: 2 }

实际应用场景

将 URLSearchParams 对象转换成对象

在处理 URL 参数的时候，我们通常会用 URLSearchParams 对象来处理字符串，例如：

const params = new URLSearchParams('foo=1&bar=2');

这个对象提供了一些方法来访问参数，例如 get() 和 getAll() 方法。但是，如果你想将这个对象转换成一个普通的对象，以便于序列化或传递给函数，你可以使用 Object.fromEntries():

const obj = Object.fromEntries(params); // { foo: '1', bar: '2' }

将 FormData 对象转换成对象

类似的，如果你需要处理表单数据，可以用 FormData 对象来创建一个表单，例如：

const form = new FormData();
form.append('foo', 1);
form.append('bar', 2);

如果你想将这个对象转换成一个普通的对象，同样可以使用 Object.fromEntries() 方法：

const obj = Object.fromEntries(form);

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

这个用途在发送 AJAX 请求的时候非常实用，你可以将表单数据转换成对象，然后使用 JSON.stringify() 方法将对象转换成 JSON 格式，去发送请求。

将 Map 对象转换成对象

Map 对象也可以通过 Object.fromEntries() 方法来转换成对象。例如：

// javascriptcn.com 代码示例
const map = new Map();

map.set('foo', 1);
map.set('bar', 2);

const obj = Object.fromEntries(map);

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

总结

通过本文的介绍，你应该对 ES10 中的 Object.fromEntries() 方法有了更深入的了解。这个方法在处理 URL 参数、表单数据以及 Map 对象等情况下非常实用，可以用来将二维数组转换成对象。希望这篇文章能够帮助你更好的理解这个新特性，并在实际应用中发挥它的作用。

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