js遍历对象的几种方法,遍历对象的方法

js遍历对象的几种方法,遍历对象的方法,JS 5种遍历对象的方式

本文主要介绍了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遍历对象的信息,请关注我们的其他相关文章!

js遍历对象的几种方法,遍历对象的方法