Object.entries
是 ES6 新增的对象方法,它可以返回一个对象自身可枚举属性的键值对的数组,其中键和值分别以数组的形式存储。本文将介绍使用 Object.entries
方法的一些技巧,帮助前端开发者更好地处理对象数据。
常规使用方法
Object.entries
方法接收一个对象作为参数,它将返回一个键值对数组:
----- ------ - - -- -- -- -- -- - -- ----- --- - ----------------------- ----------------- -- ------ --- ----- --- ----- ---
根据上述代码,返回的 arr
数组中,每个元素代表了对象自身可枚举属性的键值对,其中第一个元素为键,第二个元素为值。
使用 forEach 遍历键值对数组
我们可以通过 forEach
方法遍历 Object.entries
方法返回的键值对数组,并对每个键值对进行处理:
------------------ ------- -- - -------------------- ----------- --- -- --- -- --- -- -- --- -- -- --- --
通过使用解构赋值,我们可以方便地获取到当前键值对的键和值。
将键值对数组转换为 Map 对象
除了遍历键值对数组,我们还可以将其转换为 Map
对象。使用 Object.entries
方法和 Map
构造函数,我们可以很方便地完成转换:
----- --- - --- ---------------------------- ----------------- -- --- - --- -- -- --- -- -- --- -- - -
生成的 map
对象中,每个键值对被作为 Map
对象的一对键值存储。
将对象转换为 URL 查询字符串
我们可以使用 Object.entries
方法将对象转换为 URL 查询字符串,将对象的每个属性名和属性值拼接成一个字符串,并使用 “&” 符号连接。我们可以使用 map
方法和 join
方法完成:
----- ------ - - -- ------------- --------- ---- -- ----- ----------- - ---------------------- ----------- ------- -- ------------------ ----------- ------------------------- -- --------------------------
上面的代码将对象 { q: 'javascript', language: 'en' }
转换为字符串 "q=javascript&language=en"
。
遍历对象并转换属性名
有时我们需要遍历对象,并根据一些条件转换属性名。我们可以使用 Object.entries
方法遍历键值对数组,并使用 reduce
方法转换属性名:
----- ------ - - ------- -- ------- - -- ----- ------ - ----------------------------------- ----- ------- -- -- ------- ------------------------ ---------------------- ------ --- ---- -------------------- -- - ---------- -- ---------- - -
上述代码将对象 { fooBar: 1, barBaz: 2 }
的属性名转换为小写字母,同时在大写字母前添加下划线。
总结
本文介绍了使用 Object.entries
方法的一些技巧,包括遍历键值对数组、将键值对数组转换为 Map
对象、将对象转换为 URL 查询字符串等。这些技巧可以帮助开发者更好地处理对象数据,提高代码的效率和可读性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6540582e7d4982a6eb9d12e5