There are several ways to traverse objects in JS

A few days ago, a friend asked me what Object.getOwnPropertyNames() is used for.

I don’t really use this method at ordinary times, so I don’t know how to answer

From the analysis of the method name, it should return an array composed of the object's own property names

Isn't that the same as the Object.keys() method

I felt that things were not that simple, so I took a closer look at the differences between these methods of traversing objects

for in

for in loop is the most basic way of traversing objects, and it also You will get the properties on the object prototype chain

// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
  bar: 'bar'
})

// foo 为对象自身的属性
obj.foo = 'foo'

for (let key in obj) {
  console.log(obj[key]) // foo, bar
}

You can see that the properties on the object prototype are also cycled out

In this case, you can use the objecthasOwnProperty() Method to filter out the properties on the prototype chain

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]) // foo
  }
}

At this time, the bar property on the prototype is filtered out

Object.keys

Object.keys () is a new object method in ES5. This method returns an array composed of the object's own property names. It will automatically filter out the properties on the prototype chain, and then you can use the array's forEach() Methods to traverse

Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

In addition, there are Object.values() method and Object.entries() method. The scope of these two methods is the same as Object The .keys() method is similar, so it will not be explained again. The

for in loop and the Object.keys() method will not return the non-enumerable properties of the object

If you need to traverse non-enumerable properties, you must use the Object.getOwnPropertyNames() method mentioned earlier

Object.getOwnPropertyNames

Object.getOwnPropertyNames() is also a new object method in ES5. This method returns an array composed of the object's own property names, including non-enumerable properties. It can also be traversed through the array's forEach method.

// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
  bar: 'bar'
}, {
  baz: {
    value: 'baz',
    enumerable: false
  }
})

obj.foo = 'foo'

// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo
})

ES2015 adds the Symbol data type, which can be used as the key of an object. For this type, ES2015 also adds the Object.getOwnPropertySymbols() method

Object .getOwnPropertySymbols

Object.getOwnPropertySymbols() The method returns an array composed of the Symbol properties of the object itself, excluding string properties

Object.getOwnPropertySymbols(obj).forEach((key) => {
  console.log(obj[key])
})

There is nothing because the object has not yet There is no Symbol attribute

// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
  [Symbol('baz')]: {
    value: 'Symbol baz',
    enumerable: false
  }
})

// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'

Object.getOwnPropertySymbols(obj).forEach((key) => {
  console.log(obj[key]) // Symbol baz, Symbol foo
})

Reflect.ownKeys

Reflect.ownKeys() The method is a new static method in ES2015. This method returns an array composed of all the property names of the object itself. , including non-enumerable properties and Symbol properties

Reflect.ownKeys(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

Contrast

##MethodBasic propertiesPrototype chain Non-enumerableSymbol##for inObject.keys()##Object.getOwnPropertyNames()YesNoYesNoObject.getOwnPropertySymbols()NoNoYesYesReflect.ownKeys()YesNoYesYesConclusion

Yes	Yes	No	No
Yes	No	No	No

Only the for in loop will get the properties on the object prototype chain, other methods are only applicable to the properties of the object itself

ES language follow-up The added new features will not have side effects on previous code. For example, the for in loop that existed before ES2015, Object.keys() and Object.getOwnPropertyNames() will definitely not return the Symbol property.

Recommended tutorial: "

JS Tutorial

"

The above is the detailed content of There are several ways to traverse objects in JS. For more information, please follow other related articles on the PHP Chinese website!