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多线程的实现方法
May 08 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
js日期时间补零的小例子
Mar 05 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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
模仿OSO的论坛(一)
2006/10/09 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
python3将变量输入的简单实例
2020/08/19 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
python实现定时发送邮件
2020/12/23 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
物流仓管员工作职责
2014/01/06 职场文书
2014年环保工作总结
2014/11/26 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers