7 ways to traverse object properties in JS

In some development scenarios, it may be necessary to obtain all attribute field names of an object, or to obtain attribute field names and attribute values at the same time, such as the following common object:

 let obj = {
    type: 1,
    keyword: 'js'
}

This obj object has only two attribute fields: type and keyword , and the attribute value is 1 and js . The object in the actual process may be more complex and there will be more fields.

For traversing the properties of an object, the easiest way to think of is to use the for loop , because it is more direct and usually used more often. In addition to the direct use of the for loop, there are several other ways, here Mainly divided into three categories, a total of 7 ways:

• for loop

  • for...in
  • for...of

• Object method

  • Object.keys()
  • Object.entries()
  • Object.getOwnPropertyNames()
  • Object.getOwnPropertySymbols()

• Reflect method

  • Reflect.ownKeys()

1. for...in

The for...in statement can be used to loop over all enumerable properties of an object, including inherited properties. The following code is used to print all property fields and property values of the obj object:

 let obj = {type: 1, keyword: "js"};
for (let key in obj) {
    console.log(key, obj[key])
}

The output is as follows:

 type 1
keyword js

2. for...of

The for...of statement is mainly used to loop over the properties of an iterable object. To be an iterable object, an object must implement the @@iterator method, which means that the object (or an object on its prototype chain) must have a A property whose key is @@iterator , which can be accessed through the constant Symbol.iterator .

For ordinary objects, it is not actually an iterable object. If you use for...of to traverse directly, an error will be reported. Let's test it:

 let obj = {type: 1, keyword: "js"};
for (let key of obj) {
    console.log(key, obj[key])
}

After running, the following error appears, indicating that obj is not an iterable object, as follows:

So how to use for...of to traverse object properties, the first thing you need to do is to convert the obj object into an iterable object. Here you can use the Object.keys() method. The adjusted code is as follows:

 let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {
    console.log(key, obj[key])
}

The output is as follows:

 type 1
keyword js

3. Object.keys()

In the above for...of statement, the Object.keys() method has been used to convert the obj object into an iterable object. In fact, the Object.keys() method can also be used directly to traverse the properties of an object. let's see its definition

The Object.keys() method returns an array of the enumerable properties of a given object. The order of the property names in the array is the same as the order returned by a normal loop over the object.

The test code is as follows:

 let obj = {type: 1, keyword: "js"};
Object.keys(obj).forEach(key => console.log(key, obj[key]))

The output is as follows:

 type 1
keyword js

4. Object.entries()

In addition to the above Object.keys() method, there is also the use of the Object.entries() method, which is defined as follows:

The Object.entries() method returns an array of key-value pairs for a given object's own enumerable properties, in the same order as when using the for...in loop to traverse the object (the difference is that the for-in loop also enumerates properties in the prototype chain).

The test code is as follows:

 let obj = {type: 1, keyword: "js"};
Object.entries(obj).forEach(item => console.log(item[0], item[1]))

The output is as follows:

 type 1
keyword js

The difference between this method and the Object.keys() method is that the result returned by the loop is a key-value pair, while Object.keys() returns only the property name of the object, not the value. If you just want to traverse all the properties of an object property values, then you can use another method: Object.values()

5. Object.getOwnPropertyNames()

This method can also be used to iterate over the properties of an object, which is defined as follows:

The Object.getOwnPropertyNames() method returns an array consisting of the property names of all own properties of the specified object (including non-enumerable properties but not properties with Symbol values as names).

Let's take a look at the test code:

 let obj = {type: 1, keyword: "js"};
Object.getOwnPropertyNames(obj).forEach(key => console.log(key, obj[key]))

The output is as follows:

 type 1
keyword js

6. Object.getOwnPropertySymbols()

This method can also be used to iterate over the properties of an object, which is defined as follows:

The Object.getOwnPropertySymbols() method returns an array of all the Symbol properties of a given object itself.

It can be seen from its definition that it can only be used to traverse Symbol properties, but not non-Symbol properties. For an ordinary object, if there is no Symbol property, it cannot be traversed using this method. The specific test code is as follows:

 let obj = {type: 1, keyword: "js"};
Object.getOwnPropertySymbols(obj).forEach(key => console.log(key, obj[key]))

Can't output any result, because the obj object doesn't have any Symbol property, using the Object.getOwnPropertySymbols(obj) method will just get an empty array.

Let's define an object that contains Symbol properties, and traverse the properties of this object at the same time:

 let type = Symbol('type');
let keyword = Symbol('keyword');
let symbolObj = {};
symbolObj[type] = 1;
symbolObj[keyword] = 'js';
symbolObj['name'] = 'javascript';

Object.getOwnPropertySymbols(symbolObj).forEach(key => console.log(key, symbolObj[key]));

The output is as follows:

 Symbol(type) 1
Symbol(keyword) 'js'

Although the symbolObj object has three properties, only two of the Symbol properties are output: the Symbol(type) and Symbol(keyword) properties, and the normal property name is not output.

7. Reflect.ownKeys()

In addition to using the static methods provided by Object, you can also use the Reflect.ownKeys() method to traverse object properties. First, let's take a look at what a Reflect object is:

Reflect is a built-in object that provides methods to intercept JavaScript operations. It cannot be called through the new operator, or the Reflect object is called as a function. All properties and methods of Reflect are static (just like the Math object ).

Let's take a look at the definition of the Reflect.ownKeys() method

The static method Reflect.ownKeys() returns an array of the target object's own property keys.

As can be seen from its definition, it is similar to the Object.keys() method. The test code is as follows:

 let obj = {type: 1, keyword: "js"};
Reflect.ownKeys(obj).forEach(key => console.log(key, obj[key]))

The output is as follows:

 type 1
keyword js

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect