Enumerable and traversing the object properties ES6

1.Object.getOwnPropertyDescriptor()

Explanation: For a description of the object of the object properties.

let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))

show result:

{
    configurable: true
    enumerable: true
    value: 123
    writable: true
    __proto__: Object
}

enumerable property called enumerable property, if is false, it means that certain operations will ignore the current property.

Currently, there are four operating ignores enumerable is false attributes.

  • for ... in loop: only traverse the object itself and inherited enumerable property.
  • Object.keys (): Returns the name of the object itself of all key enumerable property. Using this traverse the object!
  • JSON.stringify (): Only the object itself may be serialized enumerated property.
  • Object.assign (): Ignore enumerable property is false, only a copy of the object's own enumerable properties
Object.getOwnPropertyDescriptor (Object.prototype, 'toString'). Enumerable // to false 
 
Object.getOwnPropertyDescriptor ([], 'length'). Enumerable // to false 

// toString Enumerable and length properties are false, so for ... not in traversed both inherited from the prototype property.

2. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors The method, specified object itself all the attributes (non-inherited attributes) that describe the object.

const obj = {   foo: 123,   get bar() { return 'abc' } }; 
 
Object.getOwnPropertyDescriptors(obj) 

// { foo: 
//    { value: 123, 
//      writable: true, 
//      enumerable: true, 
//      configurable: true }, 
//   bar: 
//    { get: [Function: bar],
//      set: undefined, 
//      enumerable: true, 
//      configurable: true } }

The above code, the Object.getOwnPropertyDescriptors(obj)method returns an object, attribute names are all the original object's property name, property value corresponding to the object is to describe the property.

 

3. Object.setPrototypeOf()

For setting an object prototype object.

// format 
Object.setPrototypeOf (Object, the prototype) 
 
// Use 
const = O Object.setPrototypeOf ({}, null ); 

// This method is equivalent to the following function. 
function (obj, proto) {    
    obj .__ proto__ = proto;   
     return obj; 
}

example:

Therefore years = {}; 
years obj = {x: 10 }; 
Object.setPrototypeOf (v so); 
 
proto.y = 20 ; 
proto.z = 40 ; 
 
obj.x // 10 
volume of the draw // 20 
obj.z // 40

note:

  1. If the first argument is not an object, it will automatically be converted to objects. However, because the first parameter is returned, so the operation will not have any effect.

  2. Because undefined and null can not be converted to an object, so if the first parameter is undefined or null, it will error.

4. Object.getPrototypeOf()

The method and Object.setPrototypeOfmethod supporting an object for reading a prototype object.

Object.getPrototypeOf(obj); 
  1. If the parameter is not an object, the object will be automatically converted.

  2. If the parameter is undefined or null, they can not be converted to an object, it will be an error.

5.  Super keyword

We know, this keyword always refers to a function where the current object , ES6 has added another similar keywords Super , pointing to the current object's prototype object .

proto foo = {const: 'Hello' }; 
 
const obj = {    
    Find () {      
        return super.foo;    
    } 
}; 

Object.setPrototypeOf (obj, proto); 
obj.find () // "Hello" 
// code above among, the object obj find method, by reference to the prototype object super.foo the proto foo properties.

Note, super keyword indicates prototype object, can only be used in the method of the object, by being given elsewhere will.

Internal JavaScript engine, super.foo equivalent Object.getPrototypeOf (the this) .foo (attributes) or Object.getPrototypeOf (the this) .foo.call (the this) (Method).

example:

proto = const {    
    X: 'Hello' ,    
    foo () {      
        the console.log ( the this .x);    
    }, 
}; 
 
const obj = {    
    X: 'World' ,    
    foo () {     
        super.foo ();    
    } 
} 
 
Object .setPrototypeOf (obj, proto); 
 
obj.foo () // "World" 

// code above, super.foo point method foo of proto prototype object, but this was still bound to the current object obj, the output is world.

 

6. Object.keys(),Object.values(),Object.entries()

Object.keys method returns an array , the members of the object itself is a parameter (not inherited) all traverse (Enumerable) attribute keys.

var obj = { foo: 'bar', baz: 42 }; 
Object.keys(obj) // ["foo", "baz"] 

 

ES2017 introduced with the Object.keyssupport of Object.valuesand Object.entriesas a supplement to traverse an object, for for ... of recycling

Object.values method returns an array , the members of the object itself is a parameter (not inherited) all traverse (Enumerable) key attribute.

const obj = { 100: 'a', 2: 'b', 7: 'c' }; 
Object.values(obj) // ["b", "c", "a"] 

In the above code, called Attribute values, in accordance with numerical values, from small to large traversed , so that the sequence returns b, c, a.

Object.values returns the object's own property can be iterated.

 

Object.entries method returns an array, the members of the object itself is a parameter (not inherited) all traverse (Enumerable) key attribute array.

const obj = { foo: 'bar', baz: 42 }; 
Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

In addition to the return value is not the same, and Object.values ​​behavior of this method are basically the same.

 

 

Guess you like

Origin www.cnblogs.com/houfee/p/11271003.html