在 ES9 中新增了一个非常实用的方法 Object.fromEntries()。这个方法可以将一个键值对数组转换为对象。这个方法可以使我们在前端开发中更加便捷地处理数据。
语法
Object.fromEntries(iterable)
iterable：一个可遍历的键值对数组，如 Map 或 Array 等。
返回一个由数组中的键值对组成的对象。
示例
const entries = [['foo', 'bar'], ['baz', 42]];
const obj = Object.fromEntries(entries);
console.log(obj); // { foo: 'bar', baz: 42 }适用场景
我们在开发过程中，经常会遇到需要将键值对数组转换为对象的场景。比如：
- 将 URL 参数转化为对象
- 将 JSON 对象转换为对象
- 将表单数据转换为对象
在以往的开发中，我们需要手动遍历数组并逐一将值赋到对象上。而现在通过 Object.fromEntries() 方法，我们可以更加快捷地完成这些转换。
将 URL 参数转化为对象
在前端开发中，我们经常需要将 URL 参数转化为对象，这样可以更加方便地操作数据。比如获取用户输入的搜索关键字：
const searchParams = new URLSearchParams('q=JavaScript&sort=stars');
const searchObj = Object.fromEntries(searchParams.entries());
console.log(searchObj); // { q: 'JavaScript', sort: 'stars' }将 JSON 对象转换为对象
我们在处理从后端请求的数据时，通常都是直接返回 JSON 字符串，这时我们需要将其转换为对象进行操作。
const jsonStr = '{"name": "Tom", "age": 18, "gender": "male"}';
const jsonObj = JSON.parse(jsonStr);
const obj = Object.fromEntries(Object.entries(jsonObj));
console.log(obj); // { name: 'Tom', age: 18, gender: 'male' }将表单数据转换为对象
当我们需要处理表单数据时，同样可以通过 Object.fromEntries() 方法将其转换为对象。
-- -------------------- ---- -------
----- ----------
-------
-----
------ ----------- ------------
--------
-------
----
------ ------------- -----------
--------
-------
-------
------ ------------ ------------- --------------
------ ------------ ------------- ----------------
--------
------- -----------------------------
-------const form = document.getElementById('form');
form.addEventListener('submit', e => {
e.preventDefault();
const formData = new FormData(form);
const formObj = Object.fromEntries(formData.entries());
console.log(formObj); // { name: 'Tom', age: '18', gender: 'male' }
});注意事项
Object.fromEntries()方法在不支持 ES9 的浏览器中无法使用，需要通过 polyfill 进行兼容处理。- 当键值对数组中存在多条相同的键时，只有最后一条有效。如
[['a', 1], ['b', 2], ['a', 3]]会被转换为{ a: 3, b: 2 }。 iterable参数必须是可遍历的对象，否则会抛出异常。
总结
Object.fromEntries() 是一个非常实用的方法，可以帮助我们更加方便地处理键值对数组。在实际开发中，我们可以根据需求进行灵活使用。同时，需要注意方法的兼容性和使用限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486f1e148841e9894598901