JS中遍历对象的方法讲解

这篇具有很好参考价值的文章主要介绍了JS中遍历对象的方法讲解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JS中遍历对象的方法讲解


在JavaScript中,有几种常用的方法可以用来遍历对象:

for…in循环

使用for…in循环可以遍历一个对象中的所有可枚举属性。它会将属性名逐个赋值给循环变量,并执行循环体内的代码。
例如:

for (let key in obj) {
  console.log(key, obj[key]);
}

当使用for…in循环遍历对象时,需要注意以下几点:

  1. for…in循环会遍历对象自身的可枚举属性以及继承的可枚举属性。如果只想遍历对象自身的属性,可以通过hasOwnProperty()方法来判断属性是否为对象自身的属性。
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}
  1. 在遍历过程中,属性名会被赋值给循环变量。如果需要获取属性值,可以通过对象和属性名使用下标访问的方式来获取属性值。
for (let key in obj) {
  console.log(key, obj[key]);
}
  1. 使用for…in循环遍历对象时,无法保证属性遍历的顺序。对象的属性在内部存储时是没有固定顺序的,因此遍历顺序不一定与属性定义的顺序相同。

  2. Object.keys()和Object.getOwnPropertyNames()方法只会返回对象自身的属性(包括可枚举和不可枚举属性),而不会返回继承的属性。你可以选择其中一种方法根据需要遍历对象的属性。

Object.keys()方法结合forEach()循环

Object.keys(obj)会返回一个包含对象自身可枚举属性的数组。我们可以使用forEach()方法来遍历这个数组,并对每个属性进行操作。
例如:

Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
});

Object.entries()结合forEach()循环

Object.entries(obj)会返回一个包含对象自身可枚举属性的键值对数组。我们可以使用forEach()方法来遍历这个数组,并对每个键值对进行操作。
例如:

Object.entries(obj).forEach(function([key, value]) {
  console.log(key, value);
});

使用 Object.entries(obj) 结合 forEach() 循环可以方便地遍历对象的键值对。Object.entries(obj) 返回一个包含对象自身可枚举属性的键值对数组。

在循环中,我们可以使用 forEach() 方法遍历这个数组,并对每个键值对进行操作。forEach() 方法接受一个回调函数作为参数,该回调函数会被传入三个参数:当前项的值、当前项的索引和原始数组。

下面是使用 Object.entries() 结合 forEach() 循环的示例代码:

const obj = { name: 'John', age: 25, city: 'London' };

Object.entries(obj).forEach(function([key, value]) {
  console.log(key, value);
});

上述示例代码中,obj 对象包含了三个属性:name、age 和 city。通过 Object.entries(obj) 方法获取到键值对数组,然后使用 forEach() 方法循环遍历数组。在回调函数中,我们使用解构赋值的方式将键和值分别赋给 key 和 value 变量,然后将它们打印到控制台。

执行上述代码会输出以下结果:

name John
age 25
city London

通过结合 Object.entries() 和 forEach() 方法,我们可以轻松地遍历对象的所有键值对,并对每个键值对进行相应的操作。请确保对象的属性是可枚举的,否则无法被 Object.entries() 获取到。

Object.getOwnPropertyNames()方法结合forEach()循环

Object.getOwnPropertyNames(obj)会返回一个包含对象自身所有属性(不仅限于可枚举)的数组。我们可以使用forEach()方法来遍历这个数组,并对每个属性进行操作。例如:文章来源地址https://www.toymoban.com/news/detail-492042.html

Object.getOwnPropertyNames(obj).forEach(function(key) {
  console.log(key, obj[key]);
});

到了这里,关于JS中遍历对象的方法讲解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js--判断一个对象为空对象几种方法

    经典面试题: 如何判断一个对象为空对象? 方法一: 将对象转换成字符串,在判断是否等于{} 方法二:循环for…in… 方法三: ES6中Object.keys()方法,返回对象的属性名组成一个数组,若长度为0,则空对象 方法四: Object.getOwnPropertyNames(obj)获取对象的属性名,存到数组中,若长度为0,则为空对

    2024年02月04日
    浏览(42)
  • javaScript中对象使用遍历渲染键值对取值,Vue的{{}}中写方法获取值。

     类似于这样的数据有若干条,我们希望展示的方式为 我的朋友:         陪我同眠的床伴【熊猫:花花,狗熊:阿壮】 此时在代码中的应该如果来写? {{ item[Object.keys(item)[0]] }} 会显示数组元素的值,而 (Object.keys(item)[0]) 会显示数组元素的键。 i tem[Object.keys(item)[0]]会根

    2024年01月17日
    浏览(34)
  • 〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(75)
  • JavaScript -- Map对象及常用方法介绍

    Map用来存储键值对结构的数据**(key-value)** Object中存储的数据就可以认为是一种 键值对结构 Map和Object的主要区别: Object中的属性名只能是 字符串或符号 ,如果传递了一个其他类型的属性名,JS解释器会自动将其 转换为字符串 Map中任何类型的值都可以成为数据的key map.si

    2024年02月10日
    浏览(53)
  • 【JavaScript】对象的遍历

    可枚举属性是指那些内部“可枚举”(enumerable)标志设置为 true 的属性 Object.getOwnPropertyDescriptor 静态方法返回一个对象,用于描述指定对象上的特定属性的配置。 通过直接的赋值和属性初始化的属性,该标识值默认为即为 true 对于通过 Object.defineProperty 等定义的属性,该标识值

    2024年02月05日
    浏览(34)
  • JS中 Math 和 Number 内置对象常用的一些方法

    参数:num,一个需要求绝对值的数。 参数:num,需要进行上舍入的数值。 注意事项:对于负数进行上舍入时会出现一定的差错。 参数:num,需要进行下舍入的数值。 参数:num1, num2, …, numN,需要比较的数值,可以是任意个数的参数。 注意事项:如果传入的参数为空,返回

    2024年02月05日
    浏览(44)
  • 【JavaScript】JavaScript Date 对象常用方法大全,例如:getDate、getDay、getFullYear、getHours等(包括作用、语法、参数解析、详细用例)

    作用:可返回月份的某一天。 语法: Date.getDate() 例子: 作用:可返回一周(0~6)的某一天的数字。星期天为 0, 星期一为 1, 以此类推 语法: Date.getDay() 例子: 作用:可返回一个表示年份的 4 位数字。 语法: Date.getFullYear() 例子: 作用:可返回时间的小时字段。返回值是

    2024年02月04日
    浏览(59)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(56)
  • js遍历map(js遍历map对象)

    var map = new HashMap(); map.put(a,1); map.put(b,2); 遍历: var key = map.keySet(); for (var i in key){  alert(map.get(key[i])); } 注:js 中使用map,要先导入一个HashMap.js文件  没要求,引入这个文件之后,可以直接使用hashmap了var map = {\\\'a\\\': \\\'aaaaa\\\',\\\'b\\\': \\\'bbbbb\\\'};for(var k in map){alert(map[k]);}可以使用

    2023年04月26日
    浏览(41)
  • JavaScript 中遍历字典(对象)的键(key)和值(value)

    要在 JavaScript 中遍历字典(对象)的键(key)和值(value),可以使用 Object.entries() ​ 方法。这个方法会返回一个由键值对(key-value pairs)组成的数组,然后可以使用 for...of ​ 循环或数组的 forEach() ​ 方法遍历键值对。 以下是使用 for...of ​ 循环和 forEach() ​ 方法遍历字典

    2024年02月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包