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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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像数组一样存取和修改字符串字符
2014/03/21 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
cookie的secure属性详解
2015/04/08 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JS实现图片切换效果
2018/11/17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python文件操作整理汇总
2014/10/21 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python内建数据结构详解
2016/02/03 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python属性和内建属性实例解析
2020/01/14 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
教师求职信范文分享
2013/12/27 职场文书
旷课检讨书大全
2014/01/21 职场文书
平安校园建设方案
2014/05/02 职场文书
数控机床专业自荐信
2014/05/19 职场文书
赔偿协议书范本
2014/09/12 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
生活小常识广播稿
2015/08/19 职场文书
小学班级口号大全
2015/12/25 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
 python中的元类metaclass详情
2022/05/30 Python