JS遍历对象属性的几种方式

ES6中 一共有 5 种方法可以遍历对象的属性。

☞  「 for...in 」

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

☞   「 Object.keys 」

返回一个数组，包括对象自身的 （不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

参数：被要求返回其自身属性的对象

返回值：一个可表示给定对象所有可枚举属性的字符串数组

下面代码从四个不同的角度去说明：

// 数组
let arr = ['a', 'b', 'c']
console.log(Object.keys(arr))
// console: ['0', '1', '2']

// 类似数组的对象
let obj = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.keys(obj))
// console: ['0', '1', '2']

// 随机索引的类数组对象
let anObj = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(anObj))
// console: ['2', '7', '100']

// 不可枚举属性：getFoo
let myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
})
myObj.foo = 1
console.log(Object.keys(myObj))
// console: ['foo']

☞   「 Object.getOwnPropertyNames 」

 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

该方法的返回值是一个字符串数组。

// 数组
var arr = ["a", "b", "c"]
console.log(Object.getOwnPropertyNames(arr).sort()) 
// ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"}
console.log(Object.getOwnPropertyNames(obj).sort())
// ["0", "1", "2"]

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo },
    enumerable: false
  }
})
my_obj.foo = 1

console.log(Object.getOwnPropertyNames(my_obj).sort())
// ["foo", "getFoo"]

☞   「 Object.getOwnPropertySymbols 」

方法返回一个在给定对象自身上找到的所有 Symbol 属性的数组。与 Object.getOwnPropertyNames 类似，可以将给定对象的所有 Symbol 属性作为 Symbol 数组获取。

下面是一个例子

const obj = {}
let a = Symbol('a')
let b = Symbol('b')

obj[a] = 'Hello'
obj[b] = 'World'

const objectSymbols = Object.getOwnPropertySymbols(obj)

objectSymbols

// [Symbol(a), Symbol(b)]

☞  「 Reflect.ownKeys 」

Reflect.ownKeys 返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

下面是一个简单的例子

let obj = {
  [Symbol('my_key')]: 1,
  enum: 2,
  nonEnum: 3
}

Reflect.ownKeys(obj)

//  ["enum", "nonEnum", Symbol(my_key)]

 

以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则：

首先遍历所有数值键，按照数值升序排列。

其次遍历所有字符串键，按照加入时间升序排列。

最后遍历所有 Symbol 键，按照加入时间升序排列。