map

Without further ado, picture above!

attribute

shorthand

    // ES5
    function person (name, age) {
        return {
            name: name,
            age: age,
        }
    }
    
    // ES6
    function person (name, age) {
        return {
            name,
            age,
        }
    }
Copy the code

Attribute name expression

Attribute name expression If it is an object, it automatically converts the object to a string by default [Object object].

Attribute name expression and concise representation cannot be used together, an error will be reported.

    let obj = {a: 1}
    let only = 'id'
    
    let person = {
        [only]: 'key',
        [obj]: 'this is obj'.// The attribute name expression is an object
        ['na' + 'me'] :'doublemeng'['get' + 'key'] () {
            console.log(this[only])     // key}}console.log(person)     // {id: "key", [object Object]: "this is obj", name: "doublemeng", getkey: ƒ}
Copy the code

The same properties

ES5 checks for the existence of the same attribute in strict mode, and an error is reported if the same attribute exists.

The ES6 does not perform verification in strict or non-strict mode.

    'use strict'
    let person = {
        name: 'doublemeng'.name: 'Memory'
    }
    person.name     // Memory
Copy the code

The enumeration of

Each property of an object has a Descriptor that controls the behavior of the property. The description of the Object. GetOwnPropertyDescriptor method can obtain the attribute Object.

    let person = {
        name: 'doublemeng'
    }
    Object.getOwnPropertyDescriptor(person, 'name')
    // {value: "doublemeng", writable: true, enumerable: true, configurable: true}
Copy the code

An enumerable property that describes an object is called “enumerable.” If it is false, it means that some operations ignore the current property.

There are four actions that ignore enumerable as false:

  1. for… In loop: Iterates only over the enumerable properties of the object itself and its inheritance;
  1. Keys () : Returns the key names of all the enumerable properties of the Object itself;
  1. Json.stringify () : serializes only enumerable properties of the object itself;
  1. Object.assign() : Ignore enumerable as false and copy only the enumerable properties of the Object itself.

ES6 states that the methods of all Class stereotypes are not enumerable.

    Object.getOwnPropertyDescriptor(
        class {test() {}}.prototype, 
        'test'
    ).enumerable  // false
Copy the code

traverse

1. for… in

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

2. Object.keys(obj)

Keys returns an array containing the key names of all of the Object’s own (not inherited) enumerable properties (not including the Symbol property).

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.

4. Object.getOwnPropertySymbols(obj)

Object. GetOwnPropertySymbols returns an array containing all the Symbol attribute of the Object itself the key name.

5. Reflect.ownKeys(obj)

Reflect.ownKeys returns an array containing all the key names of the object itself, whether they are symbols or strings or enumerable.

The above methods follow the same order rules for traversal of the object’s keys:

  1. First, all numeric keys are iterated and sorted in ascending order.
  1. Next, all string keys are traversed, in ascending order according to joining time;
  1. Finally, all Symbol keys are iterated in ascending order of time they were added.
    let obj = {
        name: 'doublemeng'.99: 99.age: 18.1: 1[Symbol('s2')]: 'this is s2'.2: 2[Symbol('s2')]: 'this is s1',}Reflect.ownKeys(obj)    // ["1", "2", "99", "name", "age", Symbol(s2), Symbol(s2)]
Copy the code

methods

shorthand

    // ES5
    var person = {
        name: 'doublemeng'.sayName: function () {
            console.log(this.name)
        }
    }
    person.sayName()     // doublemeng

    // ES6
    let person = {
        name: 'doublemeng',
        sayName () {
            console.log(this.name)
        }
    }
    person.sayName()    // doublemeng

Copy the code

The name attribute

Returns the function name.

    let person = {
        sayName () {
            console.log('name') 
        }
    }
    person.sayName.name     // sayName
Copy the code

Special circumstances:

  1. The name property of getTer&setter is not on the method, but on the get&set property of the description object of the method’s property, the return value is the method name preceded by get or set. Is this a tongue twister? Object Oriented (Understand objects) — JavaScript Basics (a)

    let person = {
    get name() {},
    set name (name) {}
};

// person.name.name // Cannot read property 'name' of undefined

let descriptor = Object.getOwnPropertyDescriptor(person, 'name')
descriptor.get.name   // get name
descriptor.set.name   // set name
Copy the code

  2. The bind method creates a function that returns bound plus the name of the original function.

    let person = {
    sayName () {}
}
person.sayName.bind(null).name      // bound sayName
Copy the code

  3. The Function constructor creates a Function that returns anonymous.

    (new Function()).name   // anonymous
Copy the code

  4. The Symbol object method returns a description of the Symbol value.

    let fun = Symbol('Symbol value')
let obj = {
    [fun] () {}
}
obj[fun].name   // [Symbol value]
Copy the code

The super keyword

The prototype object that points to the current object.

Note that when the super keyword represents a prototype object, it can only be used in the object’s methods, and will return an error if used elsewhere.

Currently, only the shorthand for object methods allows the JavaScript engine to validate that it defines object methods.

Inside the JavaScript engine, super.foo is equivalent to Object.getProtoTypeof (this).foo (property) or Object.getProtoTypeof (this).foo.call(this) (method).

    let animal = {
        name: 'animal',
        sayName () {
            console.log(this.name)
        }
    }
    
    let dog = {
        name: 'dog'.// super is used in attributes
        // name: super.name, // embedded: 'super' outside of function or class
        sayName () {
            super.sayName()
        },
        // super is used in a function 1
        // sayName: () => super.sayName // embedded: 'super' outside of function or class
        
        // super is used in a function 2
        // sayName: function () {return super.sayName()} // 'super' keyword unexpected here
    }
    
    Object.setPrototypeOf(dog, animal)
    dog.sayName()   // dog
Copy the code

reference

ECMAScript introduction to 6

summary

This article only introduces some extensions to object properties and methods in ES6, as well as the use of the super keyword and considerations. Because many new objects are added in ES6, the new methods will be described in details in the future.

Which involves the object’s accessor attribute content a little bit too much, if there is not quite understand the place can refer to the object (understand the object) — JavaScript basic summary (a)

Thanks for reading and please point out any questions.