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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
小程序自定义弹框效果
Nov 16 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通用检测函数集合
2006/11/25 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python中tab键是什么意思
2020/06/18 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
How TDD works
2012/09/30 面试题
核心价值观演讲稿
2014/05/13 职场文书
人才市场接收函
2015/01/30 职场文书
财务人员个人工作总结
2015/02/27 职场文书
岗位聘任报告
2015/03/02 职场文书
贷款工资证明范本
2015/06/12 职场文书
初中班长竞选稿
2015/11/20 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android