1. Concise representation of properties

ES6 allows variables and functions to be written directly as object properties and methods, making code simpler to write.

Const f = 'a' const b = {f} b // {f: 'a'} = {f: f}Copy the code

In ES6, it is possible to write variables directly inside objects, where the property name is the variable name and the property value is the variable value

function u(x, y){ return {x, y} } // ==== function u(x, y){ return {x: x, y: y } } u(1, 2) // {x:1, y: Function o() {const x = 1; const x = 2; return {x, y} } o() // {x:1, y:2}Copy the code

2. Attribute name expression

There are two ways to use an expression for a property name in JavaScript. One is to use an identifier directly as the property name, and the other is to use an expression as the property name. The second way is to put the expression inside square brackets

/ / a obj. Foo = true / / 2 obj [' a '+' BC '] three let t = = 123 / / 'm' let obj = {[t] : true, [' a '+' BC '] : 123}Copy the code

Expressions can also be used to define method names (note: attribute name expressions cannot be used with concise representations)

let obj = {
    ['h' + 'ello']() {
        return 'hi'
    }
}

obj.hello() // hi
Copy the code

If the attribute name expression is an object, the object is automatically converted to a string by default. [Object object]

const ka = {a: 1}
const kb = {b: 2}

const myObj = {
    [ka]: 'va',
    [kb]: 'vc'
}

myObj // Object {[object Object]: 'vc'}
Copy the code

3. The name attribute of the method

The name property of the function, which returns the name of the function, and the object method is also a function and therefore also has the name property

const p = {
    n() {
        console.log('h')
    }
}

p.n.name // n
Copy the code

The special case getter and setter properties are above get and set

const obj = {
    get foo() {},
    set fod() {}
}

obj.foo.name // undefined

const d = Object.getOwnPropertyDescriptor(obj, 'foo')

d.get.name // get foo
d.set.name // set fod
Copy the code

The function name attribute created in the special case bind returns bound plus the name of the original function

var do = function(){
    
}
do.bind().name // bound do
Copy the code

The special case is that the Function constructor creates a Function whose name returns anonymous

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

If the object’s method is a Symbol, name returns the Symbol’s description

Const k = Symbol(' Symbol ') k.ameCopy the code

4. Enumerability and traversal of properties

The enumeration of

Each attribute has a description of the Object, used to control the attribute the behavior of the Object. The getOwnPropertyDescriptor method can obtain the attribute description Object

let obj = {f: 234}
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 234,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }
Copy the code

An enumerable property that describes an object, called enumerable, which if true means that some operations ignore the current one

Four operations ignore enumerate to false - for... Keys (): Returns the keys of all the enumerable properties of the Object itself. -json.stringify (): serializes only the enumerable properties of the Object itself. -object.assign (): Ignore enumerable as false and copy only the enumerable properties of the object itselfCopy the code

All classes in ES6 have methods that are not enumerable

Property traversal

ES6 has five methods for traversing an object’s properties.

(1) for... in for... The in loop iterates over the object's own and inherited enumerable properties (excluding the Symbol property). Keys returns an array containing all the key names of the Object's own (not inherited) enumerable properties (not including Symbol properties). . (3) the Object getOwnPropertyNames (obj) Object. GetOwnPropertyNames returns an array that contains all attributes of the Object itself (excluding Symbol attribute, but cannot be enumerated attribute) of keys. . (4) the Object getOwnPropertySymbols (obj) Object. GetOwnPropertySymbols returns an array that contains the Object itself all the attributes of the Symbol key name. OwnKeys (obj) Reflect.ownkeys returns an array containing all the keys of the object itself, regardless of whether the keys are symbols or strings or enumerable. 1) for.. In traverses the key names of objects, all following the same attribute sequence. In traverses all numeric keys first, in ascending order. Next, all the string keys are iterated in ascending order by the time they were added. Finally, all Symbol keys are iterated in ascending order of time they were added.Copy the code

5. Super keyword

The this keyword always refers to the current object of the function. ES6 adds another similar keyword, super, to refer to the prototype object of the current object

Note: when the super keyword represents a prototype object, it can only be used in the object’s methods.

Const obj = {foo: super.foo} const obj = {foo: super.foo} const obj = {foo: () => super.foo} function () { return super.foo } }Copy the code

All three of the above uses of super give an error because, to the JavaScript engine, it doesn’t use super in object methods. The first way is that super is used in properties, and the second and third ways are that super is used in a function and then assigned to foo. Currently, only the shorthand for object methods allows the JavaScript engine to validate that it defines object methods.

Welcome to pay attention to the public account [Xiaoyao students]

ES6 Introduction series

ES6 Introduction to let and cont

ES6 introduction to variable deconstruction assignment

ES6 starter string extension

ES6 – An extension to get started with re

ES6 introduction to numerical extension

Extension of ES6 introductory functions

ES6 introduction to the array extension

Git tutorial

Front-end Git basics tutorial