ES12 之 Object.fromEntries 的实战应用-JavaScript中文网-JavaScript教程资源分享门户

前言

ES12 引入了 Object.fromEntries 方法，该方法可以将键值对数组转换成对象。这个新的方法在处理一些对象的场景中非常实用，下面就来探究一下它的实战应用。

Object.fromEntries

首先，让我们来看一下 Object.fromEntries 的定义:

Object.fromEntries(iterable)

这个方法的作用是将一个键值对数组转换成一个对象。iterable 是一个可迭代的对象，例如数组和映射( Map)。每一个元素必须是一个 key-value 数组，其中第一个元素是键名，第二个元素是键值。

需要注意的是，在使用此方法时特别需要注意键名必须是字符串。否则将会抛出异常。

实战应用

1. 将映射对象转化为普通对象

映射( Map )对象在某些场合下可能难以处理，例如：作为 API 的返回结果，不利于后续的处理。这时可以使用 Object.fromEntries 来将映射对象转换成普通对象。

const map = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
const obj = Object.fromEntries(map);
console.log(obj); // {foo: "bar", baz: 42}

2. 将表单数据序列化为对象

在表单处理中，常常需要将表单数据序列化成对象。这时候就可以使用 FormData 和 Object.fromEntries 来实现了。

const form = document.querySelector('#myForm');
const formData = new FormData(form);
const dataObj = Object.fromEntries(formData.entries());
console.log(dataObj); // { name: "Tom", age: 12, email: "123@qq.com"}

3. 将对象转换为 URL 参数

有时候需要将一个对象转换为 URL 的查询参数。这时就可以使用 Object.entries 和数组的 map 方法来实现多个键值对的拼接。

const params = { name: 'Tom', age: '12', email: '123@qq.com' };
const queryParams = new URLSearchParams(Object.entries(params)).toString();
console.log(queryParams); // name=Tom&age=12&email=123%40qq.com

注意事项

需要特别注意的是，如果你传递的 iterable 里的元素是不符合规则的，例如键名不是字符串，或者不是一个数组， Object.fromEntries 将会抛出一个异常。

const arr = [['foo', 1], ['bar', true], ['baz'], ['qux', null]];
Object.fromEntries(arr);
// TypeError: "baz" is not iterable

总结

Object.fromEntries 是一个非常实用的方法，可以用于转换映射对象，处理表单数据和将对象转换为 URL 参数等场景。但需要注意传入的数组中必须是符合规范的 key/value 数组，其中必须要有一个字符串键名。

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