Detailed explanation of the order of JS object traversal

Some of you may have heard that the order of traversing objects in JavaScript is not fixed. In fact, this statement is not particularly accurate.

The object has its own set of rules for traversal order. Under these rules, the traversal order of the object will be affected by the order in which the elements are inserted, but not completely affected by the order in which the elements are inserted. If you have a scenario where you must traverse in the order in which elements are inserted, consider using Map.
There are many ways to traverse objects. We often use for...in. In addition, there are:

• Object.keys
• Object.entries
• Object.getOwnerProPertyNames
• Reflect.ownKeys
• ......

The methods we listed above all follow the same rules to traverse objects. The actual traversal rules will vary depending on the key value type.
In an object, if our key value is a string in the format of a positive integer like '1' or '200'. The traversal order is arranged according to the size of the key value.
For example, let’s look at an example like this:

const obj = {}

obj['10'] = 'a';
obj['9'] = 'b';
obj[8] = 'c';
obj[7] = 'd';

console.log(Object.keys(obj)) // ["7", "8", "9", "10"]

Our final traversal order completely ignores the insertion order, and it is worth noting that in the object, even if the index value when we add the attribute is of type Number, the final result will be implicitly converted to a string.

As a kind of object, arrays also conform to the above rules. Or perhaps, the above behavior is due to compatibility with arrays. In addition, through the above rules, we can also infer that traversal of array-like objects (key values ​​are positive integers and have length attributes) is also in index order.
In addition, if our key value is a string that cannot be converted to a positive integer, this includes strings that can be converted to negative numbers (such as '-1'), decimal strings (such as '1.0') and other strings. Their traversal order is more intuitive, that is, the order in which the objects are inserted:

const obj2 = {}

obj2['1.1'] = 'a';
obj2['1.0'] = 'b';
obj2['-1'] = 'c';
obj2['jack'] = 'd'

console.log(Object.keys(obj2)); // ["1.1", "1.0", "-1", "jack"]

In fact, the type of the object's index value can be not only a string, but also a Symbol type. For the Symbol type, its traversal order is simply based on the order in which the objects are inserted.

If our object combines all the above situations, that is, all types (various forms of strings, Symbol types) appear in the index value of an object, it will:

• First, we traverse the positive integer part according to the rules about positive integers mentioned above.
• Traverse the remaining strings in the order they will be inserted next
• Finally, traverse the Symbol type in the order of insertion

I believe that by now, everyone has fully understood the traversal order of objects. Finally, there is one more point worth your attention, which is the traversal order of for...in.

In the beginning, there was no unified standard for the traversal order of for...in, and browser manufacturers would set the traversal order of for...in according to their preferences. If you have requirements for the traversal order and want to be compatible with older browser versions, it is recommended not to use it. Later, a proposal in ES 2019 standardized this phenomenon, and now the order of for...in also follows the above rules.

Although it follows the above rules, for...in also iterates over the prototype's properties. So the rule for the variable elements of for...in is to first traverse the variable object itself according to the object traversal rule we mentioned above, and then traverse the prototype of the object according to this rule, and so on, until the traversal reaches the top.

Apart from the last note about for...in, there is nothing else. In fact, there is not much content.

This is the end of this article on the detailed explanation of the order of JS object traversal. For more relevant content on JS object traversal order, 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!