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

在 ES10 中，JavaScript 引入了一些新特性，其中一个就是 Object.fromEntries() 方法。这个方法可以将一个键值对的数组转换为一个对象。这个新特性在前端开发中有着很多的应用场景，本文将对该方法进行详细介绍。

什么是 Object.fromEntries() 方法

Object.fromEntries() 方法是将一个键值对数组转化为一个对象的方法。这个方法可以接收一个由键值对组成的数组，将其转换为一个对象，并返回这个对象。这个方法与 Object.entries() 方法相反，后者是将一个对象转换为一个键值对的数组。

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

上面的代码中，我们将一个由键值对组成的数组 arr 转换为一个对象 obj，obj 中包含了数组中的所有键值对。

Object.fromEntries() 方法的应用

1. 从表单数据中创建对象

我们可以使用 Object.fromEntries() 方法将表单数据转换为一个对象。假设我们有一个表单，它的输入值如下：

-- -------------------- ---- -------
----- ------------------
  -----
    ------ --------------------------------
    ------ ----------- ------------- --------------- --
  ------
  -----
    ------ --------------------------------
    ------ --------------- ------------- --------------- --
  ------
  -----
    ------ --------------------------
    ------ ------------ ---------- ------------ --
  ------
-------

我们可以使用以下代码将表单数据转换为一个对象：

const form = document.querySelector('#example-form');
const formData = new FormData(form);
const obj = Object.fromEntries(formData.entries());
console.log(obj);

上面的代码中，我们首先获取到表单元素 example-form, 使用 FormData 对象将表单数据序列化为键值对，并传递给 Object.fromEntries() 方法来创建一个对象 obj。

2. 通过 Map 对象创建对象

Object.fromEntries() 方法还可以通过 Map 对象来创建对象。假设我们有一个 Map 对象，它的键值为字符串，我们可以将这个 Map 对象转换为一个对象。

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3'],
]);
const obj = Object.fromEntries(map);
console.log(obj);

上面的代码中，我们使用 Map 对象创建了一个 map，然后使用 Object.fromEntries() 方法将其转换为一个对象。

总结

通过本文字的介绍，我们了解了 Object.fromEntries() 方法的基本语法和应用场景。这个方法在前端开发中非常有用，可以快速地将数组转换为对象。同时，我们还了解了通过表单数据和 Map 对象创建对象的方法。希望这篇文章对你有所帮助。

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