Fork me on GitHub

JavaScript 中获取对象属性名集合的几种方式

直接看例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const SymbolA = Symbol('A')
const SymbolB = Symbol('B')

function Person(name) {
this.name = name
this[SymbolA] = 'SymbolA'
}

Person.prototype = {
constructor: Person,
job: 'student',
[SymbolB]: 'SymbolB'
}

var mimi = new Person('mimi')

Object.defineProperty(mimi, 'sex', {
value: 'female',
enumerable: false // 不可枚举
})

下面我们分别用几种方法获取mimi的属性。

for…in

1
2
3
4
5
const arr = []
for (var key in mimi) {
arr.push(key)
}
console.log('for...in', arr) // ["name", "constructor", "job"]

for...in 会遍历 实例 + 原型 可枚举属性。可用Object.hasOwnProperty将原型上的属性constructor过滤掉。

1
2
3
4
5
for (var key in mimi) {
if (mimi.hasOwnProperty(key)) {
arr.push(key)
}
}

Object.keys

1
console.log('Object.keys', Object.keys(mimi))   // ["name"]

Object.keys会遍历 实例 可枚举属性。

Object.getOwnPropertyNames

1
console.log('Object.getOwnPropertyNames', Object.getOwnPropertyNames(mimi)) // ["name", "sex"]

Object.getOwnPropertyNames会遍历 实例 可枚举 + 不可枚举 属性。

Object.getOwnPropertySymbols

1
console.log('Object.getOwnPropertySymbols', Object.getOwnPropertySymbols(mimi)) // [Symbol(A)]

Object.getOwnPropertySymbols会遍历实例上的Symbol属性。

Reflect.ownKeys

1
console.log('Reflect.ownKeys', Reflect.ownKeys(mimi))   // ["name", "sex", Symbol(A)]

相当于Object.getOwnPropertyNames + Object.getOwnPropertySymbols