This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Note: Part of the content and pictures from the network, if there is any infringement, please contact me (home page has the public number: Small siege city Lion science front end)

Author: small front siege city lion, home: small front siege city lion’s home page, source: Nuggets

GitHub: P-J27, CSDN: PJ wants to be a front end siege lion

The copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

preface

Recently a bit of literature shortage, just recently in the business requirements on a little object traversal, specifically to see, also just summed up a special object traversal of several ways and the difference of the article out, by the way in consolidation.

Object

So far, ES6 now provides five mainstream methods to help you traverse the properties of an object. Let me just tell you about them.

(1) for… In (recommended)

The for… The in loop iterates over the object’s own and inherited enumerable attributes (excluding the Symbol attribute).

var obj = {'0':'a'.'1':'b'.'2':'c'};
for(let i in obj) {
     console.log(i,":",obj[i]);
}
Copy the code
(2) Object. Keys /values(obj) (recommended)

Object.keys returns an array of keys for all the enumerable properties of the Object itself (not inherited), but not the Symbol property. The difference between object. values and object. keys is like the difference between for.. In and for.. Of is the same. One has a key and one has a value.

var obj = {'0':'a'.'1':'b'.'2':'c'};
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});
Copy the code
(3) Object. GetOwnPropertyNames (obj)

Object. GetOwnPropertyNames returns an array containing all attributes of the Object itself (excluding Symbol attribute, but cannot be enumerated attribute) of keys.

var obj = {'0':'a'.'1':'b'.'2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});
Copy the code
(4) the Object. GetOwnPropertySymbols (obj)

Object. GetOwnPropertySymbols returns an array containing all the Symbol attribute of the Object itself the key name. GetOwnPropertySymbols and Object getOwnPropertyNames names from the difference between a look out it is not much said, the application is also less at ordinary times.

(5) Reflect. OwnKeys (obj)

Reflect.ownKeys returns an array of all the key names of the object itself (without inheritance), whether they are Symbol or string, and whether they are enumerable or not.

var obj = {'0':'a'.'1':'b'.'2':'c'};

Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});
Copy the code
Traversal sequence

Object traversal, unlike simple array traversal, in the order of the index values, the above 5 methods of traversal object key, all follow the same rules of the property traversal ordering.

  1. The first step is to iterate through all the numeric keys in ascending order.
  2. The next step is to iterate over all the string keys in ascending order by the time they were added.
  3. Finally, all Symbol keys are traversed in ascending order by time of addition.

summary

Some of the differences between the five approaches are summarized below.

methods The return value inheritance Non-enumerable types Types of Symbo recommended
for.. in There is no contains Does not contain Does not contain recommended
Object.keys/values An array of Does not contain Does not contain Does not contain recommended
Object.getOwnPropertyNames An array of Does not contain contains Does not contain recommended
Object.getOwnPropertySymbols An array of / / contains Depending on the situation
Reflect.ownKeys(obj) An array of contains contains contains Depending on the situation

Generally speaking, for.. In is enough to deal with most scenarios, semantic employment is strong.

Thank you for reading, I hope it can help you, if there are mistakes or infringement of the article, you can leave a message in the comment area or add the public account in my home page to contact me.

Writing is not easy, if you feel good, you can “like” + “comment” thanks for supporting ❤