ES7 中新增的 Object.fromEntries() 方法可以将一个由键值对组成的数组转换成一个对象。这个方法可以使得我们在将数组转换成对象时，代码更加简洁易懂，同时也提高了代码的可读性和可维护性。本文将详细介绍 Object.fromEntries() 方法的用法和示例。
语法
Object.fromEntries(iterable)
Object.fromEntries() 方法转换的对象是由一个由键值对组成的数组，其中每个键值对是一个数组元素，如下所示：
const entries = [ ['foo', 'bar'], ['baz', 42] ];
使用方法
const obj = Object.fromEntries(entries);
console.log(obj); // {foo: "bar", baz: 42}Object.fromEntries() 方法接收一个键值对数组作为参数，并返回一个构建的对象。上述示例中，obj 对象就是由 entries 数组构建而成的对象。
示例
以下示例展示了 Object.fromEntries() 方法的不同用法：
将map转换成对象
使用 Object.fromEntries() 方法可以将一个 Map 对象转换成一个对象。这在将数据从一种格式转换为另一种格式时非常有用。
const map = new Map([
['foo', 'bar'],
['baz', 42]
]);
const obj = Object.fromEntries(map);
console.log(obj); // {foo: "bar", baz: 42}过滤和转换数据
Array.prototype.filter() 和 Array.prototype.map() 方法可以用于过滤和转换数据的数组，但是这些方法返回的仍然是数组。使用 Object.fromEntries() 方法可以将转换后的结果转换为对象。
-- -------------------- ---- ------- ----- ------- - - ------- ------- ------- ---- ------- ----- -- ----- --------------- - --------------------- ------- -- ------ ----- --- ---------- ----- ------------------ - -------------------------- ------- -- ----- ----- - ---- ----- --- - --------------------------------------- ----------------- -- ----- ---
这段代码首先使用 Array.prototype.filter() 方法过滤出值为数字的元素，然后使用 Array.prototype.map() 方法将这些数字乘以 2。最终，使用 Object.fromEntries() 方法将这些转换后的键值对组成的数组转换为一个对象。
从表单中收集数据
通常在编写表单时，我们需要将表单元素转换为一个对象。我们可以通过手动创建一个对象，然后将表单域映射到这个对象上来实现这一功能。但是，这种方法对于表格数据非常不方便，因此 Object.fromEntries() 方法可以极大地改善这种情况。
以下是一个将表单数据转换成对象的示例：
-- -------------------- ---- ------- ----- -------------- ------ ----------- --------------- ----------- ----- ------ ------------ ------------ -------------------------- ------ ------------- ---------- ----------- ------ ------------- --------------- ------- -------- ----- ---- - ------------------------------------ ----- --------- - -------------- ---------------- ----- -------- - ------------------------------ ---------------------- -- ---------- ----- ----- ------ -------------------- ---- ----- ---------
通过这个示例可以看到，我们可以使用 FormData() 构造函数以及 Array.from() 方法将表单数据转换成数组。随后，使用 Object.fromEntries() 方法将这个数组转换成对象。这样，我们就能够方便地将表单数据转换成对象了。
结论
在 ES7 中新增的 Object.fromEntries() 方法可以极大地提高代码转换对象时的可读性和可维护性。我们可以使用这个方法将数组转换成对象，从而方便地对数据进行过滤、转换和收集。希望本文能够帮助你更好地使用这个方法，从而优化你的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729f3ecddd3a70eb6cecb39