Some of you may have heard the expression that objects are not iterated in a fixed order in JavaScript. Actually, that’s not particularly accurate.

Objects have a set of rules for traversal order, under which the traversal order of an object is influenced by the order in which the elements are inserted, but not entirely by the order in which they are inserted. Consider using Map if you have a scenario where you have to traverse the order in which the elements are inserted.

There are many ways to traverse an object, and we often use for… In addition, in addition to

  1. Object.keys
  2. Object.entries
  3. Obejct.getOwnerProPertyNames
  4. Reflect.ownKeys
  5. .

The methods listed above follow the same rules for traversing objects. The actual traversal rules vary depending on the key value type.

In an object, if our key is a string of positive integers like ‘1’, ‘200’, etc. The traversal order is based on the size of the key value.

Let’s take 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"]
Copy the code

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

Arrays, as a kind of object, also comply with the above rules, or perhaps, the above behavior is because of the compatibility of arrays. In addition, from the above rule, we can also infer that the class array (key is a positive integer and has the length attribute) is traversed in index order.

In addition, if our key 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-format strings (such as ‘1.0’), and other strings. Their traversal order is more intuitive, which is the order in which 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"]
Copy the code

In fact, the index value of an object can be of type Symbol as well as string. For the Symbol type, the traversal order is purely in the order in which objects are inserted.

If our object combines all of the above conditions, i.e. an index value of an object with all types (various forms of string, Symbol type), it will:

  1. First we iterate over the positive integer part as we mentioned above
  2. Iterate through the remaining strings in the order in which they are inserted next
  3. And then we iterate through it in insertion orderSymboltype

Believe that by now, we have fully understood the object traversal order problem, finally there is a point worth our attention, is for… The ergodic order of in.

In the beginning, for… There is no universal order for traversal of in, and browser manufacturers will set for whatever they like. Traversal order of in. If you have a traversal order requirement and want to be compatible with older browser versions, it is not recommended to use it. Later, a proposal in ES 2019 regulates this phenomenon, and now for… The order of in also follows the rules above.

While following the above rules, for… In also iterates through the attributes of the stereotype. So the for… The rule for the variable element of IN is that the variable object itself is first iterated according to the object traversal rule described above, then the prototype of the object is iterated according to this rule, and so on until the traversal reaches the top.

Except for the last one for… Outside of the attention point of in, there is no other, in fact, relatively little content.

That’s all for traversing objects. Thank you for reading.

Have a great weekend, everybody. I got my take-out. It’s time to go.