首页 >> js开发 >> jsJS 5种遍历对象的方式js大全
jsJS 5种遍历对象的方式js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 Object.getOwnPropertyNames() 平时还真没有使用到这个方法，一时不知如何回答从方法名称来分析，应该是返回的是对象自身属性名组成的数组那和 Object.keys() 方法不就一样了吗Object.keys() 感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别for infor infor in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性
// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
bar: 'bar'
})
// foo 为对象自身的属性
obj.foo = 'foo'
for (let key in obj) {
console.log(obj[key]) // foo, bar
}
// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
bar: 'bar'
})
// foo 为对象自身的属性
obj.foo = 'foo'
for (let key in obj) {
console.log(obj[key]) // foo, bar
}可以看到对象原型上的属性也被循环出来了在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性hasOwnProperty()
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}这时候原型上的 bar 属性就被过滤掉了Object.keysObject.keysObject.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历Object.keys()forEach()
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})另外还有 Object.values() 方法和 Object.entries() 方法，这两方法的作用范围和 Object.keys() 方法类似，因此不再说明 Object.values()
Object.entries() Object.keys() for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性Object.keys() 如果需要遍历不可枚举的属性，就要用到前面提到的 Object.getOwnPropertyNames() 方法了 Object.getOwnPropertyNames() Object.getOwnPropertyNames
Object.getOwnPropertyNames
Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 forEach 方法来遍历Object.getOwnPropertyNames() 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
})
// 创建一个对象并指定其原型，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
})ES2021 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2021 同样新增Object.getOwnPropertySymbols() 方法Object.getOwnPropertySymbols() Object.getOwnPropertySymbols
Object.getOwnPropertySymbols
Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(obj[key])
})
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
})
// 给对象添加一个不可枚举的 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.ownKeysReflect.ownKeysReflect.ownKeys() 方法是 ES2021 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性Reflect.ownKeys()
Reflect.ownKeys(obj).forEach((key) => {
console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})
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()
是
否
是
是
方式
基本属性
原型链
不可枚举
Symbol
for in
是
是
否
否
Object.keys()
是
否
否
否
Object.getOwnPropertyNames()
是
否
是
否
Object.getOwnPropertySymbols()
否
否
是
是
Reflect.ownKeys()
是
否
是
是
方式
基本属性
原型链
不可枚举
Symbol
方式方式基本属性基本属性原型链原型链不可枚举不可枚举SymbolSymbol
for in
是
是
否
否
for in是是否否
Object.keys()
是
否
否
否
Object.keys()是否否否
Object.getOwnPropertyNames()
是
否
是
否
Object.getOwnPropertyNames()是否是否
Object.getOwnPropertySymbols()
否
否
是
是
Object.getOwnPropertySymbols()否否是是
Reflect.ownKeys()
是
否
是
是
Reflect.ownKeys()是否是是结论结论这其中只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2021 之前就存在的 for in 循环，Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的以上就是JS 5种遍历对象的方式的详细内容，关于JS 遍历对象的资料请关注其它相关文章！
// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
bar: 'bar'
})
// foo 为对象自身的属性
obj.foo = 'foo'
for (let key in obj) {
console.log(obj[key]) // foo, bar
}
// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
bar: 'bar'
})
// foo 为对象自身的属性
obj.foo = 'foo'
for (let key in obj) {
console.log(obj[key]) // foo, bar
}可以看到对象原型上的属性也被循环出来了在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性hasOwnProperty()
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}这时候原型上的 bar 属性就被过滤掉了Object.keysObject.keysObject.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历Object.keys()forEach()
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})另外还有 Object.values() 方法和 Object.entries() 方法，这两方法的作用范围和 Object.keys() 方法类似，因此不再说明 Object.values()
Object.entries() Object.keys() for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性Object.keys() 如果需要遍历不可枚举的属性，就要用到前面提到的 Object.getOwnPropertyNames() 方法了 Object.getOwnPropertyNames() Object.getOwnPropertyNames
Object.getOwnPropertyNames
Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 forEach 方法来遍历Object.getOwnPropertyNames() 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
})
// 创建一个对象并指定其原型，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
})ES2021 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2021 同样新增Object.getOwnPropertySymbols() 方法Object.getOwnPropertySymbols() Object.getOwnPropertySymbols
Object.getOwnPropertySymbols
Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(obj[key])
})
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
})
// 给对象添加一个不可枚举的 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.ownKeysReflect.ownKeysReflect.ownKeys() 方法是 ES2021 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性Reflect.ownKeys()
Reflect.ownKeys(obj).forEach((key) => {
console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})
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()
是
否
是
是
方式
基本属性
原型链
不可枚举
Symbol
for in
是
是
否
否
Object.keys()
是
否
否
否
Object.getOwnPropertyNames()
是
否
是
否
Object.getOwnPropertySymbols()
否
否
是
是
Reflect.ownKeys()
是
否
是
是
方式
基本属性
原型链
不可枚举
Symbol
方式方式基本属性基本属性原型链原型链不可枚举不可枚举SymbolSymbol
for in
是
是
否
否
for in是是否否
Object.keys()
是
否
否
否
Object.keys()是否否否
Object.getOwnPropertyNames()
是
否
是
否
Object.getOwnPropertyNames()是否是否
Object.getOwnPropertySymbols()
否
否
是
是
Object.getOwnPropertySymbols()否否是是
Reflect.ownKeys()
是
否
是
是
Reflect.ownKeys()是否是是结论结论这其中只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2021 之前就存在的 for in 循环，Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的以上就是JS 5种遍历对象的方式的详细内容，关于JS 遍历对象的资料请关注其它相关文章！
相关文章:
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- jsvue+axios全局添加请求头和参数操作js大全
- js代码处理JavaScript值为undefined的7个小技巧
- jsVue组件跨层级获取组件操作js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js解决vue的router组件component在import时不能使用变量问题js大全
- js在vue中使用防抖函数组件操作js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
