JS 5种遍历对象的方式


Posted in Javascript onJune 16, 2020

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

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

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

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

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

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 属性就被过滤掉了

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() 方法了

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() 方法

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
})

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

结论

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

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

以上就是JS 5种遍历对象的方式的详细内容,更多关于JS 遍历对象的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 #Javascript
详解JS预解析原理
Jun 16 #Javascript
深入了解JS之作用域和闭包
Jun 16 #Javascript
JS数组及对象遍历方法代码汇总
Jun 16 #Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 #Javascript
You might like
探讨php中header的用法详解
2013/06/07 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP会话处理的10个函数
2015/08/11 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
Javascript typeof 用法
2008/12/28 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JS判定是否原生方法
2013/07/22 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python with的用法
2014/08/22 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
简单谈谈python中的语句和语法
2017/08/10 Python
简单了解什么是神经网络
2017/12/23 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Django学习之文件上传与下载
2019/10/06 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
暑期社会实践学生的自我评价
2014/01/09 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
思想品德课教学反思
2016/02/24 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python