对象遍历几种方法比较及应用

前言

随着ES6 的出现，js里面遍历一个对象的属性有很多种方式，比如：for...in、Object.keys() 、Reflect.ownKeys 等

平时写业务代码的时候，大家随便用哪个，但是有些场景还是不能随便使用，下面就来一探究竟

for … in

for ... in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性 但是不会遍历符号 Symbol 属性

可枚举属性

通常我们给对象定义、或者新增一个属性的方式如下

const obj = { a : 1 }
obj.b = 2;

一般我们使用对象字面量书写属性代码都是可枚举属性，如上面j对象添加了a、b两个属性，这两个属性都是可枚举的

不可枚举属性

设置不可枚举属性我们通常使用 Object.defineProperty 进行方式如下

Object.defineProperty(obj,'c',{
  enumerable: false,
  value: 3
})
// 代理 obj 上的 c 属性设置了不可枚举

上面代码，通过给使用Object.defineProperty 给 obj 添加 c 属性就是不可枚举的

设置关键 enumerable: false 这句代码，所以不可枚举，如果不特别给enumerable 赋值成 false，那么默认都是可枚举的

通过上面介绍我们现在知道什么可以枚举属性，下面则看如下代码

const obj = { a: 1, b: 2, c: 3, d: 4, [Symbol()]: 5};
Object.defineProperty(obj,'e',{
  enumerable: false,
  value: 6
});
var obj2 = { f: 7 }
Object.setPrototypeOf(obj, obj2);  // 设置 obj 原型指向 obj2
for(let key in obj){
   console.log(key)
}
// 输出的结果为 a, b, c, d, f  没有打印 e 不可枚举的属性， 打印 f  为原型链属性   没有打印符号属性

由上面代码打印结果可知 for...in 只会遍历对象本身的、以及原型链上的所有可枚举属性（但是所有符号属性不遍历）

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致

通过观察下面代码执行结果来理解上面描述

const obj = { a: 1, b: 2, c: 3, d: 4, [Symbol()]: 5 };
Object.defineProperty(obj,'e',{
  enumerable: false,
  value: 6
});
var obj2 = { f: 7 }
Object.setPrototypeOf(obj, obj2);  // 设置 obj 原型指向 obj2
console.log(Object.keys(obj));   // [ 'a', 'b', 'c', 'd' ]
// 原型上的 f 属性不再打印出来， 不可枚举属性 e 也不会打印  符号属性没有打印

通过上面代码结果可知所以Object.keys只会遍历对象本身的可枚举属性，不会遍历原型链上的属性 （但是所有符号属性不遍历）

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

执行如下代码

const obj = { a: 1, b: 2, c: 3, d: 4, [Symbol()]: 5 };
Object.defineProperty(obj,'e',{
  enumerable: false,
  value: 6
});
var obj2 = { f: 7 }
Object.setPrototypeOf(obj, obj2);  // 设置 obj 原型指向 obj2
console.log(Object.getOwnPropertyNames(obj))       // [ 'a', 'b', 'c', 'd', 'e' ]
//  返回的结果 e 不可枚举也打印出来   符号属性没有打印   原型上属性也没有打印

由上面打印结果可知Object.getOwnPropertyNames只会遍历对象本身的所有属性，包括不可枚举属性，不会遍历原型链上的属性

注意 ：Object.getOwnPropertyNames() 并非 es6新增的方法，只是在es6 对此方法做出对象属性顺序进行明确规范，早期 es5 标准中没有明确属性的顺序，只能由浏览器厂商决定

然而从 es6 开始属性的顺序是基于一个特殊的规则

• 数字：当属性的类型时数字类型时，会按照数字的从大到小的顺序进行排序

• 字符串：当属性的类型是字符串时，会按照书写的先后顺序进行排序

观察如下代码执行结果

const obj = {
    a: 1,
    b: 2,
    c: 3,
    1: 4,
    d: 6,
    2: 7
}
console.log(Object.getOwnPropertyNames(obj));  // [ '1', '2', 'a', 'b', 'c', 'd' ]
// 由上面可知虽然数字属性书写在后面但是输出时放在前面

注意：Object.values()和Object.entries()返回数据的顺序是不确定的，所以不要依赖该方式输出属性

Object.getOwnPropertySymbols()

返回目标对象属性的一个数组，包含对象自身的所有 Symbol 属性

执行下面代码结果

const obj = {
    a: 1,
    b: 2,
    c: 3,
    1: 4,
    [Symbol("xx")]: 5,
    d: 6,
    2: 7,
    [Symbol("dd")]: 6
}
console.log(Object.getOwnPropertySymbols(obj));  // [ Symbol(xx), Symbol(dd) ]
// 执行打印结果只输出符号属性

小结：Object.getOwnPropertySymbols() 、Object.getOwnPropertyNames() 两个方法可以获取对象自身上所有属性，不过下面介绍 es6 新增方法反射可以快速获取对象上的属性 Reflect.ownKeys()

Reflect.ownKeys()

Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组

const obj = { a: 1, b: 2, c: 3, d: 4, [Symbol("xx")]: 5, [Symbol("yy")]: 6 };
Object.defineProperty(obj,'e',{
  enumerable: false,
  value: 8
});
var obj2 = { f: 9 }
Object.setPrototypeOf(obj, obj2);  // 设置 obj 原型指向 obj2
console.log(Reflect.ownKeys(obj));      // [ 'a', 'b', 'c', 'd', 'e', Symbol(xx), Symbol(yy) ]

// 对象上自身属性全部打印出来包括符号属性，而原型上的属性不能打印出来

通过上面打印结果知道 Reflect.ownKeys() 可以打印对象本身所有属性

总结

• for…in 方法循环遍历对象自身的和继承的可枚举属性（不含 Symbol属性）

• Object.keys 方法返回包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol属性）数组

• Object.getOwnPropertyNames() 方法返回包括对象自身的（不含继承的）所有属性（包含不可枚举）（不含 Symbol 属性）数组

• Object.getOwnPropertySymbols() 方法返回包括对象自身的（不含继承的） 所有 Symbol 属性数组

• Reflect.ownKeys()方法返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 还是字符串，也不管是否可枚举