在 ES9 中新增了一个非常实用的方法 Object.fromEntries()
。这个方法可以将一个键值对数组转换为对象。这个方法可以使我们在前端开发中更加便捷地处理数据。
语法
----------------------------
iterable
:一个可遍历的键值对数组,如 Map 或 Array 等。
返回一个由数组中的键值对组成的对象。
示例
----- ------- - -------- ------- ------- ----- ----- --- - ---------------------------- ----------------- -- - ---- ------ ---- -- -
适用场景
我们在开发过程中,经常会遇到需要将键值对数组转换为对象的场景。比如:
- 将 URL 参数转化为对象
- 将 JSON 对象转换为对象
- 将表单数据转换为对象
在以往的开发中,我们需要手动遍历数组并逐一将值赋到对象上。而现在通过 Object.fromEntries()
方法,我们可以更加快捷地完成这些转换。
将 URL 参数转化为对象
在前端开发中,我们经常需要将 URL 参数转化为对象,这样可以更加方便地操作数据。比如获取用户输入的搜索关键字:
----- ------------ - --- ------------------------------------------- ----- --------- - ------------------------------------------- ----------------------- -- - -- ------------- ----- ------- -
将 JSON 对象转换为对象
我们在处理从后端请求的数据时,通常都是直接返回 JSON 字符串,这时我们需要将其转换为对象进行操作。
----- ------- - --------- ------ ------ --- --------- --------- ----- ------- - -------------------- ----- --- - -------------------------------------------- ----------------- -- - ----- ------ ---- --- ------- ------ -
将表单数据转换为对象
当我们需要处理表单数据时,同样可以通过 Object.fromEntries()
方法将其转换为对象。
----- ---------- ------- ----- ------ ----------- ------------ -------- ------- ---- ------ ------------- ----------- -------- ------- ------- ------ ------------ ------------- -------------- ------ ------------ ------------- ---------------- -------- ------- ----------------------------- -------
----- ---- - -------------------------------- ------------------------------- - -- - ------------------- ----- -------- - --- --------------- ----- ------- - --------------------------------------- --------------------- -- - ----- ------ ---- ----- ------- ------ - ---
注意事项
Object.fromEntries()
方法在不支持 ES9 的浏览器中无法使用,需要通过 polyfill 进行兼容处理。- 当键值对数组中存在多条相同的键时,只有最后一条有效。如
[['a', 1], ['b', 2], ['a', 3]]
会被转换为{ a: 3, b: 2 }
。 iterable
参数必须是可遍历的对象,否则会抛出异常。
总结
Object.fromEntries()
是一个非常实用的方法,可以帮助我们更加方便地处理键值对数组。在实际开发中,我们可以根据需求进行灵活使用。同时,需要注意方法的兼容性和使用限制。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6486f1e148841e9894598901