Several ways to easily traverse object properties in JS

1. Self-enumerable properties

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 when iterating over the object using for...in loop. If the object's key-value pairs are not enumerable, an array of the keys will be returned.

This is reasonable, because most of the time you only need to care about the properties of the object itself.

Let's look at an example where an object has both own and inherited properties, Object.keys() only returns its own property keys:

let simpleColors = {
  colorA: 'white',
  colorB: 'black'
};
let natureColors = {
  colorC: 'green',
  colorD: 'yellow'
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors['colorA']; // => 'white'
natureColors['colorB']; // => 'black'

Object.setPrototypeOf() method sets the prototype of a specified object (that is, the internal [[ Prototype ]] property) to another object or to null.

Object.keys (natureColors) returns natureColors object’s own enumerable property keys: [‘colorC’, ‘colorD’].

natureColors contains properties inherited from simpleColors prototype object, but the Object.keys() function skips them.

Object.values() and Object.entries() also return an array of key-value pairs of the enumerable properties of a given object.

// ...
Object.values(natureColors); 
// => ['green', 'yellow']
Object.entries(natureColors);
// => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

Now note the difference with the for..in statement. for..in can not only loop through its own properties, but also enumerate the properties in the prototype chain.

// ...
let enumerableKeys = [];
for (let key in natureColors) {
  enumerableKeys.push(key);
}
enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

The enumerableKeys array contains natureColors own property keys: 'colorC' and 'colorD'.

In addition, for..in also traverses the properties inherited from simpleColors prototype object

2. Object.values() returns property values

**Object.values()** method returns an array of all the enumerable property values ​​of a given object, in the same order as using for...in loop (the difference is that the for-in loop enumerates the properties in the prototype chain).

For example, use Object.keys() to collect keys, and then use the key to get the corresponding value from the object:

let meals = {
  mealA: 'Breakfast',
  mealB: 'Lunch',
  mealC: 'Dinner'
};
for (let key of Object.keys(meals)) {
  let mealName = meals[key];
  // ... do something with mealName
  console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

meal is a plain object. Use Object.keys(meals) and an enumerated for..of loop to get the object key values.

The code looks simple, but let mealName = meals[key] is not necessary and can be further optimized as follows:

let meals = {
  mealA: 'Breakfast',
  mealB: 'Lunch',
  mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {
  console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

Because Object.values(meals) returns the object property values ​​in an array, it can be simplified directly in for..of . mealName is assigned directly in the loop.

3. Object.entries()

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

Object.entries() returns an array of key-value pairs, such as [ [key1, value1], [key2, value2], ..., [keyN, valueN] ].

It may not be very convenient to use these key-value pairs directly, but it becomes very easy to access keys and values ​​through array destructuring assignment, as shown below:

let meals = {
  mealA: 'Breakfast',
  mealB: 'Lunch',
  mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {
  console.log(key + ':' + value);
}
// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

As shown above,為Object.entries() returns a collection that is compatible with array destructuring assignment, there is no need to add an extra line for the assignment or declaration.

bject.entries() is useful when an ordinary object is to be converted into a Map, because the format returned by Object.entries() is exactly the same as the format accepted by the Map constructor: (key, value).

A two-dimensional array of key-value pairs can be converted into a Map object using the regular Map constructor.

Here is an example to slow down your pace:

let greetings = {
  morning: 'Good morning',
  midday: 'Good day',
  evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));
greetingsMap.get('morning'); // => 'Good morning'
greetingsMap.get('midday'); // => 'Good day'
greetingsMap.get('evening'); // => 'Good evening'

Map objects store key-value pairs. Any value (object or primitive) can be used as a key or a value.

Interestingly, Map provides methods that are equivalent to Object.values() and Object.entries() (except that they return Iterators) in order to extract property values ​​or key-value pairs for a Map instance:

• Map.prototype.values() is equivalent to Object.values()
• Map.prototype.entries() is equivalent to Object.entries()

map are an improved version of ordinary objects. You can get the size of the map (for ordinary objects, you must get it manually) and use arbitrary object types as keys (ordinary objects use string primitive types as keys).

Let's look at the methods that return a map of .values() and .entries():

// ...
[...greetingsMap.values()];
// => ['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()];
// => [ ['morning', 'Good morning'], ['midday', 'Good day'], 
// ['evening', 'Good evening'] ]

Note: reetingsMap.values() and greetingsMap.entries() return iterator objects. To put the result into an array, the spread operator ... is necessary.

4. Order of object properties

JS objects are simple key-value mappings, therefore, the order of properties in an object is insignificant and should not be relied upon in most cases.

In ES5 and earlier standards, the order of properties was not specified at all.

However, starting with ES6, the order of properties is based on a specific set of rules, unless time is specifically specified. We will use two new methods Object.getOwnPropertyNames和Reflect.ownKeys to write an example to explain this property sorting rule.

• Number: When the attribute type is a number type, it will be sorted in descending order;
• String: When the attribute type is a string, it will be sorted in chronological order;
• Symbol: When the attribute type is Symbol, it will be sorted in chronological order.
  

If you need an ordered collection, it is recommended to store the data in an array or Set.

Summarize:

Object.values() and Object.entries() are another improvement step in providing new standardized helper functions for JS developers.

Object.entries() is best used for array destructuring in a way that keys and values ​​can be easily assigned to different variables. This function also makes it easy to map plain JS object properties into a Map object. ,

Note: The order in which Object.values() and Object.entries() return data is undefined, so do not rely on that.

There is no way to know in real time BUG may exist after the code is deployed. In order to solve these bugs afterwards, a lot of time was spent on log debugging. Here I would like to recommend a useful bug monitoring tool Fundebug .

This concludes this article about several ways to easily traverse object properties in JS. For more information about several ways to easily traverse object properties in JS, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!