JS 5种遍历对象的方式

JS 5种遍历对象的方式1 forinforin 循环是最基础的遍历对象的方式 它还会得到对象原型链上的属性 创建一个对象并指定其原型 bar 为原型上的属性 constobj Object create bar bar foo 为对象自身的属性 obj foo foo for letkeyinobj console log obj key foo bar 可以看到对象原型上的属性也被循环出来了在这种情况下可以使用对象的 hasOwnP

1.for in

for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性

// 创建一个对象并指定其原型,bar 为原型上的属性

const obj = Object.create({ 
    bar: 'bar' }) 

// foo 为对象自身的属性

obj.foo = 'foo' for (let key in obj) { 
    console.log(obj[key]) // foo, bar } 

可以看到对象原型上的属性也被循环出来了

在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性

for (let key in obj) { 
    if (obj.hasOwnProperty(key)) { 
    console.log(obj[key]) // foo } } 

这时候原型上的 bar 属性就被过滤掉了

2.Object.keys

Object.keys() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,它会自动过滤掉原型链上的属性,然后可以通过数组的 forEach() 方法来遍历

Object.keys(obj).forEach((key) => { 
    console.log(obj[key]) // foo }) 

另外还有 Object.values() 方法和 Object.entries() 方法,这两方法的作用范围和 Object.keys() 方法类似,因此不再说明

for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性,就要用到前面提到的 Object.getOwnPropertyNames() 方法了

3.Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,包括不可枚举的属性,也可以通过数组的 forEach 方法来遍历

// 创建一个对象并指定其原型,bar 为原型上的属性 // baz 为对象自身的属性并且不可枚举 const obj = Object.create({ 
    bar: 'bar' }, { 
    baz: { 
    value: 'baz', enumerable: false } }) obj.foo = 'foo' 

// 不包括不可枚举的 baz 属性

Object.keys(obj).forEach((key) => { 
    console.log(obj[key]) // foo }) 

// 包括不可枚举的 baz 属性

Object.getOwnPropertyNames(obj).forEach((key) => { 
    console.log(obj[key]) // baz, foo }) 

ES2015 新增了 Symbol 数据类型,该类型可以作为对象的键,针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法

4.Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组,不包括字符串属性

Object.getOwnPropertySymbols(obj).forEach((key) => { 
    console.log(obj[key]) }) 

什么都没有,因为该对象还没有 Symbol 属性

// 给对象添加一个不可枚举的 Symbol 属性

Object.defineProperties(obj, { 
    [Symbol('baz')]: { 
    value: 'Symbol baz', enumerable: false } }) 
// 给对象添加一个可枚举的 Symbol 属性 obj[Symbol('foo')] = 'Symbol foo' Object.getOwnPropertySymbols(obj).forEach((key) => { 
    console.log(obj[key]) // Symbol baz, Symbol foo }) 

5.Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性

Reflect.ownKeys(obj).forEach((key) => { 
    console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo }) 

对比

方式 基本属性 原型链 不可枚举 Symbol
for in
Object.keys()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Reflect.ownKeys()

顺便加一点遍历Map对象

 var m = new Map(); m.set(1, "black"); m.set(2, "red"); m.set("colors", 2); //方法一: m.forEach(function (item) { 
    console.log(item.toString()); }); //方法二: m.forEach(function (value, key, map) { 
    console.log(value) }) // 输出: // black // red // 2 //方法三: for (var [key, value] of m) { 
    console.log(key + ' = ' + value); } // 输出: // 1 = black // 2 = red // colors = 2 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/178600.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午4:55
下一篇 2026年3月26日 下午4:55


相关推荐

  • C语言操作EXCEL文件(读写)[通俗易懂]

    C语言操作EXCEL文件(读写)[通俗易懂]C语言操作EXCEL文件(读写)本文主要介绍通过纯C语言进行EXCEL的读写操作:C语言读操作C语言写操作在之前需要使用C语言读取Excel文件内容的功能,查阅了很多资料,大部分是通过ODBC或者过OLE/COM对Excel表格的读取操作,这变要求在工程中添加类,如CApplicaton及其头文件等,这包括Excel接口、导入类、头文件等。操作十分复杂,当然我也对这种方法进行…

    2022年5月12日
    184
  • Mybatis-plus操作json字段实战

    Mybatis-plus操作json字段实战后端动态列设计与实现三部曲,这是最后一步,使用java语言,结合mybatis-plus神技操作json字段。简单介绍下mybatis-plus,大厂中mybatis使用的非常多,而mybatis-plus是基于mybatis做了扩展,进一步增强,在不影响数据存储的情况下,简化操作方式。有兴趣的朋友可以去官网了解:https://www.baomidou.com/1、架构图2、功能3、表结构DROPTABLEIFEXISTSuser;CREATETABLEuser(……

    2025年6月22日
    3
  • 热点聚焦:字节跳动登记即梦AI作品著作权 确立版权地位

    热点聚焦:字节跳动登记即梦AI作品著作权 确立版权地位

    2026年3月12日
    3
  • 黑屏只有一个鼠标箭头2026年快速修复教程

    黑屏只有一个鼠标箭头2026年快速修复教程

    2026年3月16日
    3
  • 压力换算公斤单位换算_压力单位换算表

    压力换算公斤单位换算_压力单位换算表压力单位换算表来源:华强电子网作者:华仔浏览:1163时间:2016-08-1014:18标签:摘要:november6,2002牛顿/米2(帕斯卡)(n/m2)(pa)公斤力/米2(kgf/m2)公斤力/厘米2(kgf/cm2)巴(bar)标准大气压(atm)毫米水柱4oc(mmh2o)毫米水银柱0oc(mmhg)磅/英寸2(lb/in2,psi)牛顿/米2(帕斯卡)(n…

    2022年7月27日
    15
  • 在点光源的基础上利用光域网来分布光的传播范围及方向_daiding

    在点光源的基础上利用光域网来分布光的传播范围及方向_daiding在点光源的基础上利用光域网来分布光的传播范围及方向 daiding VRIES 在点光源的基础上利用光域网来分布光的传播范围及方向 来模拟生活中射灯 筒灯 台灯等的真实照明效果 鼠标左键一直拖动一定长度 不要与造型重合 功率 越大越亮 1500 再添加光域网文件 点击目标下边 找到 ies 文件 渲染即可 复制的时候一定要实例复制 IES 文件 加载一张 ies 文件 旋转 XYZ 旋转灯的方向 覆盖图形 就是把 ies 灯变得有形状有体积 这个

    2026年1月24日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号