Object.keys(),for… The relationship between in and getOwnPropertyNames() is now summarized for easy memorization.

First, look at the definition of these three

  • for… In: Walks through an object’s enumerable properties in any order, as well as properties that the object inherits from its constructor prototype (Object.prototype). For each different attribute, the statement is executed. Note: If you don’t want to iterate through the properties of Object. prototype, you can use hasOwnProperty

  • Keys (Object) : Returns an array of the self-enumerable properties of a given Object, in order of the property names and using for… The in loop returns the same order as it iterates through the object. (for… In using hasOwnProperty)

  • Object. GetOwnPropertyNames (Object) : method returns a specified by the Object of all its attributes of the attribute name (including not enumerated attribute but does not include Symbol value as the name of the attribute) consisting of an array.

Second, specific usage

All usage is based on this example

// Create a constructor Personfunction Person() {} // Create two attributes for the constructor's prototype object, name, sayName Person.prototype.name ='mzong'
Person.prototype.sayName = function() {console.log(this.name)} // create an instance p1, add two attributes to p1, eatting var p1 = new Person() p1.work ='work'
p1.eatting = 'food'
Copy the code

1. for… in

for (var props in p1) {
  console.log('for-in:: '+props)} // Result //for-in:: work
// for-in:: eatting
// for-in:: name This property inherits from Person.prototype //forIn :: sayName This attribute inherits from Person.prototype. In loops through both its own properties and the constructor's properties in Prototype. // If the instance attribute is not enumerable, then for... Can in loop out? DefineProperty (p1,'work', {
  enumerable: false/ / by defaulttrue}) // Continue the loopfor (var props in p1) {
  console.log('for-in:: '+props)} // Result //for-in:: eatting
// for-in:: name This property inherits from Person.prototype //forIn :: sayName This property inherits from Person.prototype and see, work is not looped out because it is not enumerable. // If you want to loop through the properties of the p1 instance, use hasOwnProperty.for (var props in p1) {
  if (p1.hasOwnProperty(props)) {
    console.log('for-in:: '+props)}} // result //for-in:: work
// for-in:: eatting // If instance P1 only wants to loop its own properties, use hasOwnProperty.Copy the code

2. Object.keys()

Console. log(object.keys (p1)) // Result: ["work"."eatting"] // The result is an enumerable property data, just loop through instance p1's own property, not following constructor's prototype. // Object.keys() equals for... In uses hasOwnProperty. // Also, if work is not enumerable, can object.keys () be looped out? DefineProperty (p1,'work', {
  enumerable: false/ / by defaulttrue}) console.log(object.keys (p1)) // Result: ["eatting"] // See, work is not looped out because it is not enumerable.Copy the code

3. Object.getOwnPropertyNames()

Object. Keys (Person. Prototype)"name"."sayName"] Object. GetOwnPropertyNames (Person. The prototype) results / / / / /"constructor"."name"."sayName"[// See here, loop out the non-enumerable constructor property as well.Copy the code

conclusion

Conclusion: In the study of… In loops, we use hasOwnProperty instead of looping to properties in the constructor’s prototype. With object.keys () and getOwnPropertyNames, you can replace for… In la.