One, variable declaration

As in ES4, variables declared with var have variable promotion, so this is not an error. In es6, const and let do not work.

console.log(a);
var a = 5;
Copy the code
  1. Constant (const, no variable promotion, block-level scope, scope values cannot be changed)
  2. Block-level scope (let, no variable promotion)
for (let i = 0; i<5; i++) {
  setTimeout(() => {
    console.log(i)    //0 1 2 3 4
  },30)
}
for (var i = 0; i<5; i++) {
  setTimeout(() => {
    console.log(i)   //5 5 5 5 5
  },30)
}
Copy the code

In particular, for const and let, there is a temporary dead zone. The so-called temporary dead zone means that if there is a variable in the scope, the variable will be bound to the scope and will not be looked up. The following code will report an error.

const a = 1;
{

  console.log(a);
  const a = 2;
}
console.log(a)
Copy the code

Two, deconstruct the assignment

Destructible assignment is when you put the declaration and the assignment together and it’s usually array to array, object to object, the array can set the default, the object can set the default, and the default has to be equal

let [zhan, si, xl = 5] = [3, 4];
console.log(zhan, si, xl) //3, 4, 5

let {name, age = 23} = {name: 'xl', bigAge: 24}
console.log(name, age) //xl, 23
Copy the code

In particular, there may sometimes be keyword cases to change the name by using the form:

let { name, age: xl, default: d } = { name: 'xlei', age: 9, default: 'xxx' };
console.log(name, xl, d);
Copy the code

Here’s a concrete application of the default values:

function ajax({
    url = new Error('url without'),
    type = 'get',
    data = xxx
}){
  console.log(data, type)   //{a: 5}, get
}
ajax({
    url: '/test',
    data: {a:5}
})
Copy the code

Three, string

  1. Template string (easy concatenation, can be newline)
let exe1 = xlei
let exe2 = `${exe1}Nihao, me tooCopy the code
  1. StartWith, endWith returns a Boolean value
let str1 = 'www.bsym.online'
let str2 = 'http://www.bsym.online'
console.log(str1.startsWith('http://')) / /false
console.log(str2.startsWith('http://')) / /true
console.log(str2.endsWith('online')) / /true
Copy the code
  1. PadStart, padEnd completion — does not delete the original content
// Start padEnd complete (remember you can only increase, not decrease)let str1 = 'nihao'
let newStr = str1.padStart(8,'xl')
let newStr2 = str1.padEnd(8,'xl')
console.log(newStr, newStr2)   //xlxnihao, nihaoxlx
Copy the code

Four, arrow function (solve this problem, also easier to write)

While this in a traditional function is the context in which it is defined, this in an arrow function is the context in which it is used.

letaa = (arg1, arg2) => { console.log(arg1, arg2) } aa(1, 2) //1, 2 ; ((arg1, arg2) => { console.log(arg1, arg2) })(3, 4);Copy the code

By the way, self-executing anonymous functions like the one above are preceded by semicolons so that neither they nor others are cheated. Also don’t use argeuments for the arrow functions

Five, extension operators

  1. Array extension operator: converts an array into a comma-separated sequence of arguments
letarr = [...[1, 2, 3], ...[4, 5, 6]] console.log(arr) // 1, 2, 3, 4, 5, 6 console.log(Math.min(... arr)) // 1Copy the code
  1. Object

The Rest destructuring assignment of an object is used to take values from an object. It is equivalent to assigning all the traversable properties that have not yet been read to the specified object. Note that the Rest destructuring assignment must be the last parameter, otherwise an error will be reported. Rest to deconstruct the assignment of object, copy attributes of the object obj, Rest deconstruction assignment is shallow copy of a copy, that is if a key value is the value of compound type, array, object, function, then the Rest of deconstruction is the value of an assignment copy reference, rather than a copy of the value, deconstruction assignment will not copy inherited from the prototype object’s properties

let obj = {name: 'xl', age: 23, say:'ok', eat: {xl: 'okok'}}
let{name, age, ... Z} = obj // Assign a shallow copy of the object obj property obj. Say ='oo'
obj.eat.xl = 'o? o? '
console.log(name, age, z)  //xl 23 { say: 'ok', eat: { xl: 'o? o? '}}Copy the code
let z = {a: 3, b: 4, c:{
    eat:'ok'
}}
letn = {... Z} Notice the difference between this and direct assignmentletn = z; One is the shallow copy object property and one is the shallow copy object Z.A. = 5 z.C. at ='ok? '
console.log(n)  //{ a: 3, b: 4, c: { eat: 'ok? '}}Copy the code

So if you want to implement a deep copy, how do you do that? If it’s an ordinary value, assign it, if it’s not an ordinary value, recurse until it’s an ordinary value, then assign it, as follows:

// Implement deep copy preservation inheritance relationship can realize various types of copy to achieve recursive copyfunction deepClone(obj) {
        if(typeof obj ! = ='object') return obj;
        if (obj == null) return null;
        if (obj instanceof Date) return new Date(obj);
        if (obj instanceof RegExp) return new RegExp(obj);
        leto = new obj.constructor(); // Retain class inheritance //for (let key in obj) {
        //     // console.log(obj.hasOwnProperty === Object.prototype.hasOwnProperty) 
        //     if(obj.hasownProperty (key)) {// Only the own attribute is assigned //if(typeof (obj[key]) == 'object'){
        //             o[key] = deepClone(obj[key])
        //         }else{
        //             // console.log(obj[key])
        //             o[key] = obj[key]
        //         }
                
        //     }
        // }
        Object.keys(obj).forEach((key, index) => {
            if(typeof (obj[key]) == 'object'){
                o[key] = deepClone(obj[key])
            }else{
                // console.log(obj[key])
                o[key] = obj[key]
            }
        })
        return o;
    }
    let o = { a: { a: 1 }, b: function(){
        console.log(this.a)
    } }
    let newObj = deepClone(o);
    o.a.a = 2;
    console.log( newObj.b());
Copy the code

Six, the array commonly used methods

// 1) The return value from map is a new Array array.prototype.map =function (fn) {
        let arr = [];
        for (let i = 0; i < this.length; i++) {
            arr.push(fn(this[i], i));
        }
        return arr;
    };
    let arr = [1, 2, 3].map(item => {
        returnitem * 2; }); console.log(arr); // 2)filter This parameter is returnedtrueThat means stay and returnfalseSaid to deletelet arr = [1, 2, 3];
    let filterArr = arr.filter(item => {
        returnitem > 2; }); console.log(filterArr); // 3) Some and returntrueTo findfalseYou can use everylet r = [2, 1, 3].some(item => {
        return item > 2;
    });
    console.log(r);  //trueVar ages = [2, 1, 3]; // 4) Var ages = [2, 1, 3];let r = ages.every((item) => {
        return item > 2
    })
    console.log(r)  //false// 5)Array.from(); Turns an array of classes into an arrayCopy the code

The class of ES6

Let’s review some of the nouns in ES5:

  1. Member attributes (method) | instance attribute (method) : in the constructor by this. property-declared
  2. Static properties (methods) : a class declared by a class. XXX
  3. Private properties (methods) : properties that can only be used inside a class and not anywhere else
  4. Public attribute (method) | prototype properties (method) : on the prototype announcement the properties or methods of xx. Prototype. XXX knock code:
functionParent(name) { this.name = name; / / member properties | instance attributes this. Say =function() {// member method console.log(this.name)}} parent-.smoking ='no'// Static property parent-prototype. up =function() {/ / public methods | prototype method to the console. The log ('ok')}Copy the code

Let’s talk about class in ES6 (private properties and methods are not considered in ES6):

class Parent{ constructor(x, y){ this.x = x; / / member properties | instance attributes Can traverse the print instance can be directly printed, / /, like ES5 instance attributes unless explicitly defined in itself (that is defined in this object), otherwise is defined on the prototype (that is, the definition in the class). this.y = y;returnThis. x // Returns the instance object this} static by default if not returnedb(){// Methods that belong to classes are also called static methodsreturn 2;
    }
    eat() {/ / prototype methods on | public methods And is not enumerated instances of print print can't show the console. The log (this. X);return this.x
    }
    // Object.assign(Parent.prototype, {
        // eat{} (), / /}); } class Child extends Parent{ // constructor(x, y, z){ super(x, y); // Parent.call(this); Return an instance of the subclass, this.age = z; / / member properties |} the static instance attributesa(){// belong to the method on the classreturn 1;
    }
    smoking(){// the method on the prototypereturnSuper.eat () + this.age // This refers to the current subclass, not to the instance of the subclass // console.log(this.age)}}let child = new Child(2, 3, 4);
// console.log(child);
console.log(child.smoking())

class Foo {
    constructor() {//constructor returns this by default. This returns an entirely new object, resulting in an instance object that is not an instance of class Fooreturn Object.create(null);
    }
}

new Foo() instanceof Foo
// falseClass Point {constructor(x, y) {this.x = x; this.y = y; }toString() {
    return '(' + this.x + ', ' + this.y + ') ';
    }

}

var point = new Point(2, 3);
console.log(point)
point.toString() // (2, 3)

point.hasOwnProperty('x') / /true
point.hasOwnProperty('y') / /true
point.hasOwnProperty('toString') / /false
point.__proto__.hasOwnProperty('toString') / /true


class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
Copy the code

These are some of the new features that are commonly used in ES6. Certainly above can exist a lot of inadequacy place, welcome everybody to put forward valuable opinion or suggestion, also hope can help you to obtain a few knowledge from it!