JS 5种遍历对象的方式

更新时间：2020年06月16日 14:20:46   作者：XXX

这篇文章主要介绍了JS中5种遍历对象的方式，文中讲解非常的细致，帮助你更好的了解JS，感兴趣的朋友可以参考下

几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的

平时还真没有使用到这个方法，一时不知如何回答

从方法名称来分析，应该是返回的是对象自身属性名组成的数组

那和 Object.keys() 方法不就一样了吗

感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别

for in

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

1

2

3

4

5

6

7

8

9

10

11

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

const obj = Object.create({

 bar: 'bar'

})

// foo 为对象自身的属性

obj.foo = 'foo'

for (let key in obj) {

 console.log(obj[key]) // foo, bar

}

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

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

1

2

3

4

5

for (let key in obj) {

 if (obj.hasOwnProperty(key)) {

  console.log(obj[key]) // foo

 }

}

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

Object.keys

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

1

2

3

Object.keys(obj).forEach((key) => {

 console.log(obj[key]) // foo

})

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

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

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

Object.getOwnPropertyNames

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// 创建一个对象并指定其原型，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() 方法

Object.getOwnPropertySymbols

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

1

2

3

Object.getOwnPropertySymbols(obj).forEach((key) => {

 console.log(obj[key])

})

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 给对象添加一个不可枚举的 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

})

Reflect.ownKeys

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

1

2

3

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() 是 否 是 是

结论

这其中只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性

ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2015 之前就存在的 for in 循环，Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的

以上就是JS 5种遍历对象的方式的详细内容，更多关于JS 遍历对象的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

  • Javascript如何递归遍历本地文件夹
  • JS数组及对象遍历方法代码汇总
  • JavaScript遍历数组的方法代码实例
  • JS中数组实现代码(倒序遍历数组,数组连接字符串)
  • java JSONArray 遍历方式(2种)
  • JS 遍历 json 和 JQuery 遍历json操作完整示例
  • js遍历详解(forEach, map, for, for...in, for...of)
  • JS中如何轻松遍历对象属性的方式总结
  • JS遍历树层级关系实现原理解析

JS 5种遍历对象的方式相关推荐

  1. js 遍历对象的方式

    1.   for in 循环 for in 循环诞生于es5,主要用于遍历对象的可枚举属性(自有属性.继承自原型的属性).可枚举,可理解为可遍历,是由属性的enumerable值决定的,在js中基本包 ...

  2. java的entryset_「entryset」Java中Map的 entrySet() 详解以及用法(四种遍历map的方式) - seo实验室...

    entryset Entry 由于Map中存放的元素均为键值对,故每一个键值对必然存在一个映射关系. Map中采用Entry内部类来表示一个映射项,映射项包含Key和Value (我们总说键值对键值对 ...

  3. HashMap两种遍历数据的方式

    HashMap的遍历有两种方式,一种是entrySet的方式,另外一种是keySet的方式. 第一种利用entrySet的方式: Map map = new HashMap(); Iterator i ...

  4. java中两种遍历集合的方式_Java中Map集合的两种遍历方式

    Java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下Java中Map集合的两种遍历方式! 关于遍历Map集合的几 ...

  5. js中如何遍历对象属性

    对象声明: 1.var obj = {}//字面量,建议这种方式(方便初始化赋值) 2.var obj = new Object(); 对象赋值: 1.obj.name = "zhangsa ...

  6. Java中Map的 entrySet() 详解以及用法(四种遍历map的方式)

    Entry 由于Map中存放的元素均为键值对,故每一个键值对必然存在一个映射关系.  Map中采用Entry内部类来表示一个映射项,映射项包含Key和Value (我们总说键值对键值对, 每一个键值对 ...

  7. js for in 遍历对象与数组

    遍历对象 let obj = {q:'9',w:'5',e:'2',t:'7',c:'3'}//for in 遍历对象 key为对象的属性名称,遍历属性值时用[]操作符访问//通过[]操作符为对象添加 ...

  8. js for in遍历对象_JS中轻松遍历对象属性的几种方式

    自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都 ...

  9. jS四种函数的调用方式

    6- js 函数的四种调用方式 2016年11月04日 13:41:54 阅读数:7559 函数的四种调用方式 函数有下列调用模式 函数调用模式 方法调用模式 构造器模式 上下文模式 函数调用 模式 ...

最新文章

  1. python二维数组初始化
  2. Android中利用正则表达式验证手机号是否合法
  3. 367. 有效的完全平方数(二分法)
  4. 海量数据处理 （一）
  5. 论文浅尝 | 六篇2020年知识图谱预训练论文综述
  6. 常用的linux命令20条,Linux常用的20条命令
  7. iis ftp 隔离账户
  8. ax200黑苹果蓝牙驱动_家庭网络升级计划篇一：将无线进行到底，AX200网卡升级体验...
  9. nginx 映射ip端口服务
  10. 计算机网络原理之运输层
  11. android仿微信播放视频播放器,vue DPlayer 仿微信朋友圈视频播放效果
  12. Python 爬虫 爬取视频
  13. h3c 抓包么 能通过debug_H3C debugging 使用技巧
  14. greenplum的主机名更改导致无法启动问题解决
  15. 百度直达号轻应用开发运营指南
  16. java.lang.NoClassDefFoundError: org/jdom2/Content
  17. moses 编译_Moses 训练步骤
  18. 中西方对时间的差异_中西方时间观念的不同
  19. 整理的子模块设置清单
  20. word2vec是这样演变到bert的

热门文章

  1. 超详细的 PyCharm 教程
  2. 软件测试iphone 降频,网传iOS 14.5.1降频严重！是真的吗？-果粉之家实测！
  3. 基于Android的计步器(Pedometer)的讲解(二)——柱状图分析2
  4. 打造嘉兴智能电网 点亮新型智慧城市
  5. mysql查看表结构的几种方式
  6. 查看、替换回车换行符
  7. （附源码）计算机毕业设计SSM慧学IT精品课程网站
  8. Cesium指南针(含源代码和插件)
  9. java jquery 框架_[Java教程]小谈Jquery框架
  10. SQL基础教程MICK版 ···第五章总结