That’s all the ES6 can do

1. Let, const

1.1 Problems of VAR

1. Var has scope issues (contaminates global scope)
2. Var can be declared repeatedly
3. Var improves pre-interpretation of variables
4. Var does not define constants

1.2 Let, const feature

1. Let, const may not be declared repeatedly
2. Let, const are not declared in the global scope
3. Let, const do not preinterpret variables
4. Const const declares constants in uppercase

1.3 give it a try

Var var a = 5; console.log(window.a); / / / / 5let, constleta = 5; console.log(window.a); //undefined // there is a problem,letWhere is the a declaration of the definition? Var var a = 5; var var a = 5; var a = 6; //let, constlet a = 5;
let a = 6; //Identifier 'a'Has already been declared cannot be repeated //3. //var console.log(a); //undefined = var a; var a = 5; //letConst console.log(a)//Uncaught ReferenceError: A is not definedleta = 5; Var var a = 5; a = 6; //const const a = 5; a = 6; //Uncaught TypeError: Assignment to constant variable. Grammar mistakesCopy the code

2. Deconstruction

Destruct is a new feature in ES6 that allows direct parsing of the contents of array objects.

//1let[a1, a2, a3] = [1, 2, 3]. //a1 = 1; a2 = 2; a3 = 3; //2. Object destructlet {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8}; //n ='meteor'Variable names can be modified with the form: //3. Complex deconstructionlet [{age}] = [{age:8,name:'xx'},'shenzhen', [1, 2, 3]]; //age = 8 notice object deconstruction //4. Default assignmentlet {age=5} = {age:8,name:'xx'}; Age =8 If there is no age field age=5 // Common function arguments give default values // beforefunction() {var a = a | | 5} / / nowfunction(a=5){}

Copy the code

3. The string

Es6 adds “‘” backquotes, where ${} handles template strings.

3.1 the quotation

1. More human string concatenation

let name = 'xx';
let age = 9;
let str = `${name}${age}At the age of `; console.log(str); // XX is old this yearCopy the code

2. Simple simulation using Re + Eval

let name = 'xx';
let age = 9;
let str = `${name}${age}At the age of `; str = str.replace(/\$\{([^}]+)\}/g,function (The $1) {
    return eval(arguments[1]); }) console.log(str); // XX is old this yearCopy the code

3. Tagged template character

// Use a method before the backquotes, which splits the string into two arrays according to template variables // The first is an array of fixed values // the second is an array of substitution variableslet name = 'xx';
let age = 9;
functiontag(strArr, ... args) { var str =' ';
    for (leti = 0; i < args.length; i++) { str += strArr[i] + args[i] } console.log(strArr,args); / / /' '.'this year'.'old' ]   [ 'xx', 9 ]
    //
    str += strArr[strArr.length - 1];
    return str;
}
let str = tag`${name}This year,${age}At the age of `; console.log(str);Copy the code

3.2 includes method

// Determine whether a string is contained in the stringlet str = 'woaini';
str.includes('ai'); //true
Copy the code

3.3 endsWith, startsWith methods

// Determine whether a string starts or ends with a certain string'1AB2345CD';
console.log(a.startsWith('1A')); //true
a.endsWith('cD') / /false
Copy the code

4. The function

4.1 Function parameters can be assigned and deconstructed

function({a=5}){}
Copy the code

4.2 Arrow Function

1. If there is only one argument, you can omit the parentheses
2. If you don’t write return, you don’t have to write curly braces
3. No arguments variable
4. Don’t change the this point

/ / sumlet sum = (a,b)=>a+b;
Copy the code

An array of 5.

5.1 Array new methods

1. Array.from(); // Convert the class array to an array
2. Array.of(); // Create an array
3. Array.fill(); // Populate the array
4. Array.reduce(); // The incoming callback is suitable for handling adjacent array elements
5. Array.filter(); // Array filtering
6. Array.find(); // Find the return value
7. Array.includes(); // Check whether the array has a value

5.2 Array. The from ()

//Array.from();
let arr = Array.from({'0': 1,'1':2,length:2}); console.log(arr); / / [1, 2]Copy the code

5.3 Array) of ()

An Array of (2, 3); / / [2, 3]Copy the code

5.4 Array. The reduce ()

[1, 2, 3, 4, 5]. Reduce ((prev, next, index, current) => {//prev If reduce passes in the second parameter, prev is the second parameter; //next If reduce takes a second argument, next is the first element of the array; Otherwise, next is the number of times the second element of the array is incremented by //indexreturnprev + next; }) //reduce method simple implementation array.prototype.myreduce =function (cb, pre) {
    let prev = pre || this[0];
    for(var i = pre ? 0:1; i < this.length; i++) { prev = cb(prev, this[i], i, this); }return prev;
}
Copy the code

5.3 Array. The filter ();

letResult = [1, 2, 3, 4, 5]. The filter (function(item){
    returnitem>3; }) console.log(result); //[4,5] // array.prototype.myfilter =function(cb){
    var arr = [];
    for(var i=0; i<this.length; i++){
        var item = this[i];
        if( cb(item) ) arr.push(item);
    }
    return arr;
}
Copy the code

5.4 Array. The find ();

letResult =,1,1,2,3 [1]. Find (function(item){
    returnitem == 2; }) console.log(result); / / 2Copy the code

Object of 6.

6.1 If key and value are equal, this parameter can be abbreviated

let name = 'xx';
let obj = {name};
Copy the code

6.2 deconstruction

7. Class Class

1. The Class definition Class
2. Extends implementation inheritance
3. Support for static methods
4. Constructor method

class Parent{
    constructor(name){
        this.name = name;
    }
    getName() {return this.name;
    }
    static fn() {return9. } } class Child extends Parent{ constructor(name,age){ super(name); // Subclasses have constructors that must have super this.age = age; }}let child = new Child('xingxing', 9); console.log(child.getName()); //xingxing console.log(child.name); //xingxing console.log( Child.fn() ); / / 9Copy the code

8. Generator

8.1 Use “*” before iterator function Names

function *gen() {}Copy the code

8.2 yield concession

The iterator suspends execution at yield and calls the iterator next method to continue execution

8.3 give it a try

function *gen() {let a = yield 'xx'; console.log(a); //alet b = yield 9;
    console.log(b);
    return b;
}
let it = gen();
console.log(it.next('a')); // value:'xx'.done: false }
console.log(it.next('b')); //{ value: 9,done: false }
Copy the code

8.4 Used together with Promise Co

let bluebird = require('bluebirld');
let co = require('co');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
function *r() {let content1 = yield read('./1.txt'.'utf8'); / / content. / 2. TXTlet content2 = yield read(content1,'utf8');
    return content2;
}
letit = r(); Generator co(it).then(function(data){ console.log(data); }); // Implement asynchronous code synchronizationCopy the code

9. async await

1. Async is used to modify functions and needs to be accompanied by await
2. Await can only be followed by promise

let bluebird = require('bluebird');
let fs = require('fs');
let read= bluebird.promisify(fs.readFile); //await only with promise asyncfunction r() {let content1 = await read('./1.txt'.'utf8');
    let content2 = await read(content1,'utf8');
    returncontent2; } //async returns promise r().then()function(data){
    console.log(data); 
})
Copy the code