技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营
卡卡网是专业的网站测速平台,网速测试,测试网站速度,就来卡卡网 ~
问题反馈网络日志

【DiyVM】沙田机房/香港云/回国CN2线路/AMD EPYC/39元一月5M/CN2海外云主机 24元/月BGP+CN2海外云 低至25元/月海外主机 低至$2/月

DiyVM:香港VPS惊爆价36元一月
★站长/主播变现★有流量就来
5M CN2 GIA云主机 24元起
一一一云主机 26元起一一一
官方高价收量,每日稳定结算

一一云主机 24元 3折起一一
海外CN2云 低至$2.5/月
海外云低至2折 298/年
免费测试★APK免杀 谷歌过保护
官方收量CPA/CPS长期稳定

海外主机 5M CN2 低至$2/月
恒创科技 一 海外服务器 ● 高速稳定
★解决安装报毒★谷歌过保护机制
超级签★免杀★加固★满意付款
全球云主机 3天试用再买

【菠萝云】香港4G内存99元,马上开通
亿人互联-津/京BGP托管租用/VPS
苹果签名/APP封装/远控免杀
10M CN2海外云VPS 53元/月
CN2 GIA/1000Mbps $111/月

实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现

赞助商

分类目录

赞助商

最新文章

本文介绍我们要用jQuery操作HTML,移除某class的div标签,但保留内...
在书写正则表达式时,* + ? 符号非常常见,但是它们又比较容易混淆。本文将用一...
本文我将给大家介绍如何用JS+CSS来实现可移动显示的图片背景效果。 
在一些商品展示的网页里,我们经常看到图片放大的效果。本文就给大家介绍一下,如何用...
本文介绍如何分别使用JS和jQuery两种方法来实现点击按钮复制文字到剪贴板,只...
本文介绍如何使用jquery-resizable调整表格(table)列宽。
本文介绍如何使用jquery-resizable插件调整左右/上下窗格大小。

搜索

【示例】3种方法迭代遍历JavaScript对象属性和值

作者:admin    时间:2022-6-10 16:11:5    浏览:1761

JavaScript迭代遍历对象属性和值非常常见常用,在本文中,我将介绍3种常用的方法,来达到我们的目的。每种方法都有细微的差别,因此我将为每种方法提供详细的解释和示例。

3种方法迭代遍历JavaScript对象属性和值

1、使用Object.entries(对象条目)

我将介绍的第一个方法是Object.entries。此方法返回对象的字符串键值对数组。有几种Object.entries的使用方法。

使用forEach方法迭代

使用forEach方法,我们可以单独访问每个entry。请注意,entry会进行解构,entry[0]是键,而entry[1]是对应的值。

  1. const obj = {
  2.   'key1': 'value1',
  3.   'key2': 'value2'
  4. }
  5.  
  6. Object.entries(obj).forEach(entry => {
  7.   let [key, value] = entry;
  8.   console.log(key, value);
  9. })
  10.  
  11. // output
  12. key1 value1
  13. key2 value2

使用for...of迭代

除了上面的forEach,我们还可以使用 for...of 解构entry,循环定义中的每一个。

  1. const obj = {
  2.   'key1': 'value1',
  3.   'key2': 'value2'
  4. }
  5.  
  6. for (let [key, value] of Object.entries(obj)) {
  7.   console.log(key, value);
  8. }
  9.  
  10. // output
  11. key1 value1
  12. key2 value2

forEachfor都起到迭代数组的作用,但它们的作用不尽相同,参考forEach和for不同的功能表现

我应该什么时候使用Object.entries?

从上面的例子可以看出,Object.entries最有价值的特性是你可以同时访问 keyvalue。因此,当你知道要对对象的属性(键)和相应的值进行操作时,这是一种理想的方法。

2、使用Object.keys(对象键)

Object.keys返回对象的可枚举属性名称的数组。

可枚举属性是“通过简单赋值或通过属性初始化器”设置的属性。JavaScript如何检查一个属性是否可枚举。由于 JavaScript 对象有很多额外的属性(例如constructor, __proto__),我们不想在对我们的对象进行操作时包含这些类型的属性。当然,它们可以直接访问,但在迭代属性时不会包含在内。

用法很简单,看下面的例子:

  1. const obj = {
  2.   name: 'Levi Coffin',
  3.   birthdate: '10/28/1798',
  4.   city: 'Newport',
  5.   state: 'Indiana'
  6. };
  7.  
  8. Object.keys(obj)  // => [ 'name', 'birthdate', 'city', 'state' ]

要遍历对象的属性,我们可以使用forEach

  1. Object.keys(obj).forEach(key => {
  2.    console.log(key);
  3. });

或者for...of

  1. for (let key of Object.keys(obj)) {
  2.   console.log(key);
  3. }

而要得到对应的值,我们可以使用key进行参考:

  1. for (let key of Object.keys(obj)) {
  2.   let value = obj[key];
  3.   console.log(key, value);
  4. }

我应该什么时候使用Object.keys?

当你只对对象的键(属性名)感兴趣时,你应该使用它。如果你也对这些值感兴趣,那么Object.entries可能是正确的工具。

x

3、使用Object.values(对象值)

Object.valuesObject.keys的对应物,并返回对象的可枚举属性值的数组。

同样,我们可以迭代使用forEach

  1. Object.values(obj).forEach(value => {
  2.    console.log(value);
  3. });

或者for...of

  1. for (let value of Object.values(obj)) {
  2.   console.log(value);
  3. }

我应该什么时候使用Object.values?

同样,就像它的对应物一样,你应该在只对对象的值感兴趣时使用Object.values

使用与上面相同的示例:

  1. const nameAgeMap = {
  2.   'Tom': 30,
  3.   'Susan': 28,
  4.   'Rob': 35,
  5.   'Claire': 22
  6. };

我们可以很容易地得到对应的值列表:

  1. Object.values(nameAgeMap)  // => [ 30, 28, 35, 22 ]

总结

本文通过多个示例,详细介绍了迭代遍历JavaScript对象属性和值的几种方法。通过本文的学习,我们应该了解这几种方法各自的优点,在使用时选择合适的方法。

相关文章

标签: 对象  属性  
x
广告: CN2云主机 免费试用