记录五种常用的对象遍历方法

记录五种常用的遍历对象的方法。

定义对象

// 以对象 { protokey: 'proto-key' } 作为原型创建一个新对象
let obj = Object.create({
  protoKey: 'proto-key'
});
// 给新对象自身添加属性
obj.user = 'ostuthere';
obj.age = 20;
obj.gender = 'female';
// 添加Symbol属性
obj[Symbol('mother')] = 'user1';
obj[Symbol('father')] = 'user2';
// 添加不可枚举属性
Object.defineProperty(obj, 'key1', {
  value: 'non-enumerable',
  writable: true,
  enumerable: false
});
console.log(obj);

for...in...

for…in… 会以任意顺序遍历出对象自身以及原型链上的可枚举属性（不包括 Symbol 属性）。代码如下。

for (let key in obj) {
  console.log(key);
}
// 结果依次打印出 user age gender protokey

我们发现 for…in… 不仅遍历出了对象自身的三个可枚举属性，还将其原型上的可枚举属性也遍历了出来。如果我只想拿到对象自身的可枚举属性该怎么办呢？这时候 hasOwnProperty() 方法登场了，它能判断对象的自身属性中是否存在指定的属性，若是则返回 true，否则返回 false。我们可以通过 for…in… + hasOwnProperty() 获取到对象本身的可枚举属性，代码如下。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}
// 结果依次打印出 user age gender

Object.entries()/Object.keys()/Object.values()

Object.entries(targetObj) 是 ES5 中增加的对象方法，该方法返回一个数组，由对象自身的所有可枚举属性（不包括 Symbol 属性）的键值对组成，Object.keys(targetObj)、Object.values(targetObj) 同理，不过返回的数组分别由属性名、属性值组成。由于返回的是数组，所以我们可以使用数组的方法对结果进行遍历获取需要的值，代码如下。

Object.entries(obj).forEach((item)=>{
  console.log(item);
});
// 结果依次打印出 ['user', 'ostuthere'] ['age', 20] ['gender', 'female']
Object.keys(obj).forEach((key)=>{
  console.log(key);
});
// 结果依次打印出 user age gender
Object.values(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 ostuthere 20 female

Object.getOwnPropertyNames(targetObj)

Object.getOwnPropertyNames(targetObj) 也是 ES5 中增加的对象方法，该方法返回一个数组，由对象自身的所有属性（包括不可枚举属性，但不包括 Symbol 属性）的属性名组成。同样的，由于返回的是数组，我们可以对返回结果使用数组方法进行遍历或其他操作。

Object.getOwnPropertyNames(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 user age gender key1

Object.getOwnPropertySymbols(targetObj)

ES6 中新增了 Symbol 基本数据类型，可以用来标识对象的属性，相应地增加了一个对象方法来获取 Symbol 属性 —— Object.getOwnPropertySymbols(targetObj) 。与上个方法类似，但该方法返回的数组由对象自身的所有 Symbol 属性的属性名组成。若对象上不存在 Symbol 属性，该方法返回一个空数组。

Object.getOwnPropertySymbols(obj).forEach((value)=>{
  console.log(value);
});
// [Symbol(mother), Symbol(father)]

Reflect.ownKeys(targetObj)

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。与大多数全局对象不同，Reflect 不是一个构造函数，所以不能通过 new 运算符对其进行调用，也不允许将 Reflect 对象作为一个函数来调用。Reflect 的所有属性和方法都是静态的（就像Math对象），其中的方法 Reflect.ownKeys(targetObj) 返回一个数组，由对象自身的所有属性名（包括 Symbol 属性和不可枚举属性）组成，它的返回值等同于Object.getOwnPropertyNames(targetObj).concat(Object.getOwnPropertySymbols(targetObj))。

Reflect.ownKeys(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 user age gender key1 Symbol(mother) Symbol(father)

总结

下面通过表格列出上述 5 种方法是否可以遍历出目标对象中的基本属性、不可枚举属性、Symbol 属性以及其原型链中的属性。

遍历方式	基本属性	不可枚举	Symbol属性	原型链上的属性
for...in	是	否	否	是
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	是	否	否
Object.getOwnPropertySymbols()	否	否	是	否
Reflect.ownKeys()	是	是	是	否