导读

最新面试被问到了如何去遍历一个Object，以下就简单记录一下几种方法和不同吧。

for…in…

使用for...in...可以遍历一个对象，其可以迭代所有的字符串属性，包括从原型链继承来的。MDN

1
2
3
4
5
const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

但如果只想用自己的属性，可以通过Object.prototype.hasOwnProperty判断

1
2
3
4
5
6
7
8
9
const originObject = { a: 1, b: 2, c: 3 }
const object = Object.create(originObject);
object.d=4

for (const property in object) {
  if(object.hasOwnProperty(property)){
      console.log(`${property}: ${object[property]}`);
  }
}

Object.keys

Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

MDN

1
2
const object = { a: 1, b: 2, c: 3 };
const keys = Object.keys(object);

总结

如果需要查找包含原型继承的属性，用for...in..，否则用Object.keys()。因为for...in...需要查找原型链，其效率会比较慢，不如Object.keys()。