第五十一周总结——对象遍历方法

<=返回

---

遍历对象的方法

• 1. 创建带有不同种类参数的对象
• 2. Object.keys()/Ojbect.values()/Object.entries()
• 3. Object.getOwnPropertyNames()
• 4. Object.getOwnPropertySymbols()
• 5. Reflect.ownKeys(obj)
• 6. for…in

对对象中的key值进行遍历
对象中的属性分为两种类型，字符串和Symbol。
如果我们使用除字符串和Symbol之外的类型最后都会变成字符串。

var objProp = {}
var obj = {
  [objProp]: 'obj'
}
console.log(obj);//{ '[object Object]': 'obj' }
1
2
3
4
5

1. 创建带有不同种类参数的对象

var obj = {
  str: 'str-value',
  [Symbol()]: 'Symbol()-value'
}
// defineProperty方法可以直接再一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象。
//定义一个不可枚举属性
Object.defineProperty(obj, 'unenum', {
  value: '不可枚举unenum',
  writeable: true,//是否可以被赋值运算符改变
  enumerable: false,//是否出现在枚举属性中
  configurable: true//是否可以改变和删除
})
//定义一个不可枚举属性
Object.defineProperty(obj, Symbol('unenum'), {
    value: '不可枚举Symbol("unenum")-value',
    writeable: true,
    enumerable: false,
    configurable: true
})
//在对象的原型上添加属性
Object.setPrototypeOf(obj, { foo: '原型bar-value', [Symbol('foo')]: '原型Symbol("foo")-value' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上述代码输入obj为：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ur589o1E-1661955777441)(…/image/Interview-index-1.png)];

2. Object.keys()/Ojbect.values()/Object.entries()
   这三种方法都只能访问对象上的属性的集合。但是只处理obj自身的可枚举字符串属性。
   Object.keys()获取key值，Ojbect.values()获取value值，Object.entries()获取key-value值。

console.log(Object.keys(obj));//[ 'str' ]
console.log(Object.values(obj));//[ 'str-value' ]
console.log(Object.entries(obj));//[ [ 'str', 'str-value' ] ]
1
2
3

3. Object.getOwnPropertyNames()
   可以获取对象自身的属性集合，可以处理自身的所有字符串属性的key值，包括不可枚举的，但不能处理Symbol属性和原型上面的属性。

console.log(Object.getOwnPropertyNames(obj));//[ 'str', 'unenum' ]
1

4. Object.getOwnPropertySymbols()
   可以获取对象自身的属性集合，可以处理自身的所有Symbol属性的key值，包括不可枚举的，但不能处理字符串属性和原型上面的属性。

console.log(Object.getOwnPropertySymbols(obj));//[ Symbol(), Symbol(unenum) ]
1

5. Reflect.ownKeys(obj)
   可以看作Object.getOwnPropertyNames()+Object.getOwnPropertySymbols()，返回所有自身的字符串属性和Symbol属性的key值，包括不可枚举的，但不能返回原型上面的属性。

console.log(Reflect.ownKeys(obj));//[ 'str', 'unenum', Symbol(), Symbol(unenum) ]
1

6. for…in
   返回自身及其原型链上的所有可枚举的字符串属性的key值，不包括不可枚举的和Symbol属性的key值。

for(let prop in obj){
  console.log(prop);//str -> foo
}
1
2
3

for…in和hasOwnProperty一起用就可以实现Object.keys()/Ojbect.values()/Object.entries()
hasOwnProperty是判断对象自身是否有指定的属性，也就是指定的key值。

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    //{ key: 'str', value: 'str-value', pair: [ 'str', 'str-value' ] }
    console.log({ key: prop, value: obj[prop], pair: [prop, obj[prop]] })
  }
}
1
2
3
4
5
6