前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS中遍历对象的方法讲解

JS中遍历对象的方法讲解

原创
作者头像
肥晨
发布于 2023-06-27 01:25:08
发布于 2023-06-27 01:25:08
84600
代码可运行
举报
文章被收录于专栏:农民工前端农民工前端
运行总次数:0
代码可运行

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

for...in循环

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

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for (let key in obj) {
  console.log(key, obj[key]);
}

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

  1. for...in循环会遍历对象自身的可枚举属性以及继承的可枚举属性。如果只想遍历对象自身的属性,可以通过hasOwnProperty()方法来判断属性是否为对象自身的属性。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}
  1. 在遍历过程中,属性名会被赋值给循环变量。如果需要获取属性值,可以通过对象和属性名使用下标访问的方式来获取属性值。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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()方法来遍历这个数组,并对每个属性进行操作。

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
});

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

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

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Object.entries(obj).forEach(function([key, value]) {
  console.log(key, value);
});

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Object.getOwnPropertyNames(obj).forEach(function(key) {
  console.log(key, obj[key]);
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS遍历对象,获取key:value
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
用户2323866
2021/06/24
29.1K0
Js遍历对象总结
Js遍历对象的方法主要有for in、Object.keys()、Object.getOwnPropertyNames()、Reflect.ownKeys()、Object.getOwnPropertySymbols()。
WindRunnerMax
2020/08/27
7.1K0
JS中轻松遍历对象属性的几种方式
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。
前端小智@大迁世界
2019/08/06
13.9K0
JS常用的循环遍历你会几种?
? 这是第 100 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~ 本文首发于政采云前端团队博客:JS常用的循环遍历你会几种 https://www.zoo.team/
政采云前端团队
2021/06/15
2.3K0
JS常用的循环遍历你会几种?
JS常用方法整理-遍历对象
JS中经常需要对对象的属性进行遍历,下面我们来总结一下JS遍历对象属性的几种方法。
love丁酥酥
2018/08/27
4.8K0
【JavaScript】对象 ⑤ ( 遍历对象 | for…in 循环 遍历对象 | Object.keys() 遍历对象 的 属性名称 | Object.entries() 遍历对象属性键值对 )
对象中有若干属性 , 我们访问对象中的属性的时候 , 需要 使用 . 操作符 加上 属性名称 , 才能访问 , 如 person.name ;
韩曙亮
2024/04/28
2.1K0
【JavaScript】对象 ⑤ ( 遍历对象 | for…in 循环 遍历对象 | Object.keys() 遍历对象 的 属性名称 | Object.entries() 遍历对象属性键值对 )
js的15种循环遍历,你掌握了几种?
While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。
Java深度编程
2020/06/10
19.4K0
js的15种循环遍历,你掌握了几种?
《现代Javascript高级教程》JavaScript对象
在 JavaScript 中,对象是一种非常重要的数据类型,它允许我们以键值对的形式组织和存储数据。对象提供了丰富的属性和方法,使得我们能够创建、操作和管理复杂的数据结构。本文将详细介绍 JavaScript 对象的属性和常用 API,并提供一个模拟实现对象的示例。同时,还将探讨对象的应用场景和一些相关的参考资料。
linwu
2023/07/27
2570
javascript 中Object一些操作方法
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
chuchur
2022/10/25
6980
【前端基础进阶】JS-Object 功能详解
该方法主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性,不拷贝继承的属性。 Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。
super.x
2019/04/12
1.6K0
【前端基础进阶】JS-Object 功能详解
javaScript 循环遍历大全
写下这篇文章的目的,主要是想总结一下关于JS对于集合对象遍历的方式方法,以及在实际应用场景中怎样去使用它们。本文会主要介绍:while,for,forEach,every,some,filter,reduce,map,indexOf…
用户6973020
2020/02/24
2.3K0
ES6之对象的扩展
对象有一个描述对象,通过Object.getOwnPropertyDescriptor方法可以获取:
wade
2020/04/24
3810
JS系列2-怎么把一个对象当做数组使用
我们知道在JS中对象和数组的操作方式是不一样的,但是我们可以通过封装,给对象加一层包装器,让它可以和数组拥有同样的使用方式。我们主要借助Object.keys()、Object.values()、Object.entries()、Proxy。
星星在线
2023/03/20
1.9K0
JS系列2-怎么把一个对象当做数组使用
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
返回一个包含对象自身可枚举属性的键数组。这个方法只考虑对象自身的属性,不考虑原型链上的属性。
watermelo37
2025/01/22
3270
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
JavaScript 对象所有API解析【2020版】
近日发现有挺多人对对象基础API不熟悉,举个开发中常见的需求,经常会有类似的封装http到原型Vue.prototype,一般人是这样封装的,但容易被篡改。
前端迷
2020/02/26
1.1K0
Object 中的几个很相似的方法
这里主要讨论这么几个方法,他们用法很相似,但又有所不同。在实际开发中就有可能陷入其中,搞不清到底用哪个方法比较好。下面就开始一一介绍。
多云转晴
2019/10/23
6280
Object 中的几个很相似的方法
如何遍历JavaScript中对象属性
在2016年6月发布的ECMAScript 2016的同一时期,令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段(完成)。
疯狂的技术宅
2019/03/27
4K0
如何遍历JavaScript中对象属性
Object对象
Object对象是JavaScript中两个顶层对象之一,提供方法供直接调用以及原型链继承调用。
WindRunnerMax
2020/08/27
2.4K0
可以迭代大部分数据类型的 for…of 为什么不能遍历普通对象?
我们知道,ES6 中引入 for...of 循环,很多时候用以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Array(数组), String(字符串), Map(映射), Set(集合),TypedArray(类型化数组)、arguments、NodeList对象、Generator等可迭代的数据结构等。for...of语句在可迭代对象上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
coder_koala
2020/12/17
1.2K0
可以迭代大部分数据类型的 for…of 为什么不能遍历普通对象?
JS中的那些循环
1、 副作用: forEach返回undefined, 函数本身不会直接改变调用它的对象, 但是可以在callback里面对原数组进行修改
BLUSE
2022/11/20
2.2K0
推荐阅读
相关推荐
JS遍历对象,获取key:value
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档