----------------------------------------------------------------------------------------------------------------------------
以下为2022年5月16日更新
遍历对象的方式
1.for..in..
2.Object.keys
3.Object.getOwnPropertyNames()
4.Object.getOwnPropertySymbols()
5.Reflect.ownKeys()
对象的属性划分:
1.原型属性
2.对象自身可枚举属性
3.对象自身不可枚举属性
4.symbol属性
想了解什么是自身可枚举属性和不可枚举属性,查看下方连接
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
一、for...in..
获取对象自身的可枚举属性+原型链上的可枚举属性但不包含symbol属性
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
for(var key in obj){
console.log(key,obj[key])
}
bar原型属性和foo 对像自身可枚举属性被输出
如果不希望原型链上的属性被输出,可配合hasOwnProperty使用
hasOwnProperty():这个方法会查找一个对象有没有某个属性,但不会在原型链上找
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
for(var key in obj){
if(obj.hasOwnProperty(key)){
console.log(key,obj[key])
}
}
可以看到原型属性被过滤掉了。
关于for...in...的属性输出顺序
1.大于等于0的整数会按照小到大顺序输出,负数和小数会按照字符串处理
2.字符串类型会按照定义的顺序进行输出
3.Symbol属性不进行输出
二、Object.keys()
es5版本新增
获取对象自身的可枚举属性,不包含原型链上的可枚举属性和Symbol属性
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
Object.keys(obj).forEach(key=>{
console.log(key,obj[key])
})
只输出了自身的可枚举属性foo
Object.keys()的属性输出顺序同for...in...相同
三、getOwnpropertyNames()
es5版本新增
获取对象自身的所有属性名,包含不可枚举属性,但不包括原型链上的属性和Symbol属性。
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
Object.getOwnPropertyNames(obj).forEach(key=>{
console.log(key,obj[key])
})
如何判断对象属性是否为可枚举属性
1.Object.getOwnPropertyDescriptor(对象,’属性‘)
Object.getOwnPropertyDescriptor(对象,’属性‘)方法会返回一个描述对象,描述对象中的enumerable属性若为ture则说名是可枚举属性。
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
console.log(Object.getOwnPropertyDescriptor(obj,'foo'))
console.log(Object.getOwnPropertyDescriptor(obj,'name'))
2.Object.prototype.propertyIsEnumerable()
obj.propertyIsEnumerable(要判断的属性) 会返回布尔值,true为可枚举属性。
//原型属性
const obj = Object.create({
bar:'bar'
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
console.log(obj.propertyIsEnumerable('foo'))
console.log(obj.propertyIsEnumerable('name'))
四、Object.getOwnPropertySymbols()
es6版本新增
获取对象自身的所有Symbol属性,不包含原型链上的Symbol属性
//原型属性
const obj = Object.create({
bar:'bar',
[Symbol('sex')]:"sex"
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
Object.getOwnPropertySymbols(obj).forEach(key=>{
console.log(key,obj[key])
})
原型上的Symbol属性并没有输出
五、reflect.ownKeys()
es6新增
获取对象自身的所有属性名,包括不可枚举属性和Symbol属性,不包括原型链
//原型属性
const obj = Object.create({
bar:'bar',
[Symbol('sex')]:"sex"
})
//对象自身可枚举属性
obj.foo = "foo"
//对象自身不可枚举属性
Object.defineProperty(obj,'name',{
enumerable:false,
value:'zs'
})
//symbol属性
obj[Symbol('age')]="age"
Reflect.ownKeys(obj).forEach(key=>{
console.log(key,obj[key])
})