javascript最全面对象属性的遍历

前言

ES6中共有5种遍历对象属性的方法

1. for…in
2. Object.keys(obj)
3. Object.getOwnPropertyNames(obj)
4. Object.getOwnPropertySymbols(obj)
5. Reflect.ownKeys(obj)

var parent = {}
Object.defineProperties(parent, {
	a: {
		value: 1,
        writable: true,
        enumerable: true,
        configurable: true  
	},
	b: {
		value: 1,
        writable: true,
        enumerable: false,
        configurable: true  
	},
	[Symbol('parent')]: {
		value: 1,
        writable: true,
        enumerable: true,
        configurable: true
	}
})
var child = Object.create(parent, {
	c: {
        value: 1,
        writable: true,
        enumerable: true,
        configurable: true            
    },
    d: {
        value: 1,
        writable: false,
        enumerable: true,
        configurable: true            
    },
	e: {
        value: 1,
        writable: true,
        enumerable: false,
        configurable: true            
    },
	f: {
        value: 1,
        writable: true,
        enumerable: true,
        configurable: false            
    },
	[Symbol('child')]: {
		value: 1,
        writable: true,
        enumerable: true,
        configurable: true
	}
})

for…in

for…in遍历对象自身的所有属性和继承的所有可枚举的属性，但不包含Symbol属性。

for (const key in child) {
	console.log(key)
}
// c d f a 

Object.keys(obj)

Object.keys(obj)返回对象自身的所有可枚举属性的数组，但不包含Symbol属性。

Object.keys(child)
// ["c", "d", "f"]

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)返回对象自身所有属性和继承的所有可枚举属性，但不包含Symbol属性。

Object.getOwnPropertyNames(child)
// ["c", "d", "e", "f"]

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)返回对象自身所有Symbol属性的数组。

Object.getOwnPropertySymbols(child)
// [Symbol(child)]

Reflect.ownKeys(obj)

Reflect.ownKeys(obj)返回对象自身所有属性，无论是否可枚举、是否Symbol属性。

Reflect.ownKeys(child)
// ["c", "d", "e", "f", Symbol(child)]

总结

1. 首先遍历所有属性名为数值的属性，按数字排序
2. 其次遍历所有属性名为字符串的属性，按生成时间排序
3. 最后遍历所有属性名为Symbol的属性，按生成时间排序

参考

https://es6.ruanyifeng.com/#docs/object