本文主要介绍了JS中遍历对象的五种方式。这篇文章里的解释很详细,有助于你更好的理解JS。感兴趣的朋友可以参考一下。
前几天有小伙伴问我Object.getOwnPropertyNames()是干什么用的?
平时真的没用过这个方法,一时也不知道怎么回答。
从方法名分析,应该是由对象本身的属性名组成的数组。
那不是和Object.keys()方法一样吗?
感觉没那么简单,所以我仔细研究了这些遍历对象的方法之间的区别。
for in
For循环是遍历对象最基本的方式,它还会获取对象原型链上的属性。
//创建一个对象并指定其原型,将bar作为原型的属性
const obj=Object.create({
酒吧:“酒吧”
})
//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中的一个新的Object方法,它返回一个对象自身属性名的数组。它会自动过滤掉原型链中的属性,然后可以用数组的forEach()方法遍历。
Object.keys(obj)。forEach((key)={
console.log(obj[key]) //foo
})
此外,还有Object.values()方法和Object.entries()方法。这两个方法的作用域与Object.keys()方法的作用域相似,不再赘述。
for循环和Object.keys()方法都不会返回对象的不可枚举属性。
如果需要遍历不可枚举的属性,就需要使用前面提到的Object.getOwnPropertyNames()方法。
object . getownpropertymanames
对象。getownpropertymanames()
也是ES5中的一个新的对象方法。此方法返回对象自己的属性名数组,包括不可枚举的属性。它也可以由数组的forEach方法遍历。
//创建一个对象并指定其原型,将bar作为原型的属性
//baz是对象本身的属性,不能枚举。
const obj=Object.create({
酒吧:“酒吧”
}, {
巴兹:{
值:“巴兹”,
可枚举:false
}
})
“福”
//不要包含不可枚举的baz属性
Object.keys(obj)。forEach((key)={
console.log(obj[key]) //foo
})
//包含不可枚举的baz属性
object . getownpropertymanames(obj)。forEach((key)={
console.log(obj[key]) //baz,foo
})
ES2015增加了符号数据类型,可用作对象的键。对于这种类型,ES2015还添加了Object.getOwnPropertySymbols()方法。
Object.getOwnPropertySymbols
Object.getOwnPropertySymbols()方法返回对象本身的符号属性数组,不包括string属性。
object . getownpropertymodels(obj)。forEach((key)={
console.log(obj[key])
})
没有,因为对象还没有符号属性。
//将可枚举符号属性添加到对象中
Object.defineProperties(obj,{
[符号( baz)]: {
值:符号baz ,
可枚举:false
}
})
//将可枚举符号属性添加到对象中
obj[Symbol(foo)]=Symbol foo
object . getownpropertymodels(obj)。forEach((key)={
console . log(obj[key])//Symbol baz,Symbol foo
})
Reflect.ownKeys
Reflect.ownKeys()方法是ES2015中的新静态方法,它返回对象本身的所有属性名称的数组,包括不可枚举的属性和符号属性。
Reflect.ownKeys(obj)。forEach((key)={
console.log(obj[key]) //baz,foo,Symbol baz,Symbol foo
})
对比
方式
基本属性
原型链
不可枚举
Symbol
因为在
是
是
不
不
Object.keys()
是
不
不
不
Object.getOwnPropertyNames()
是
不
是
不
Object.getOwnPropertySymbols()
不
不
是
是
Reflect.ownKeys()
是
不
是
是
结论
其中只有for in循环会获取对象原型链上的属性,其他方法只适用于对象本身的属性。
es中后来添加的新特性不会对之前的代码产生副作用,比如ES2015之前就存在的for in循环。Object.keys()和Object.getOwnPropertyNames()肯定不会返回Symbol属性。
这就是JS 5遍历对象方法的细节。更多关于JS遍历对象的信息,请关注我们的其他相关文章!