The project ES6 commonly used in new Feature Summary

table of Contents

ES compatibility

 let command and const

Class Class

Function parameter default values 

Arrow function

Template string

---

ES compatibility

Be sure to understand, even if ES2015 to ES2019 has been released, not all browsers support the new features. In order to get a better experience, it is best to use the latest version of the browser of your choice. By following links, you can check which features are available in all browsers.

•  ES2015（ES6）：http://kangax.github.io/compat-table/es6/
• ES2016+：http://kangax.github.io/compat-table/es2016plus/

Based on the above link in the compatibility table, most of its features are available in modern browsers. Even though some ES2016 + features not yet supported, but we can start to use the new syntax and new features.

 let command and const

In ES6 Previously, jsonly vara declarative way, and let the new const two ways after ES6. var variable block-level concept is not defined in the scope, let declared const and has block-level scope.

• let works similarly var, but the variable is declared, only letvalid commands within the block is located.
• constThe statement is a read-only constant. Once declared, the value of the constant can not be changed.

{
  let a = 1;
  var b = 1;
  const c = 3;
}

// let const 的块级作用域
a // ReferenceError: a is not defined.
b // 1
c // ReferenceError: a is not defined.

// const 声明的常量不能重复赋值，let可以
const d = 4
let e = 5
d = 6    //  Assignment to constant variable.
e = 7
e    // 7

Difference let, const and var: The variable lift, global variables, repeat the statement, repeated assignments, temporary dead zone, block-level scope, not only declare initialization function of the difference

var will not block-level scope, and temporarily dead zone, the other can.

let block-level scope, but not the assignment may be repeated to enhance the variable, global variable, redeclaration.

const only temporarily dead-and block-level scope, the other can not. It must be assigned at the time of declaration.

Class Class

Before ES6, the conventional method is generated by an object instance constructor. as follows:

function Book(name, page){
    this.name = name;    // 书名
    this.page = page;    // 页数
}
Person.prototype.getBookInfo = function () {
    return 'Book is ' + this.name + ', it is ' + this.page
}
var myBook = new Book('js',35)

ES6 provided closer to the traditional language of the writing, we introduce Class (Class) concept as a template object. By classkeyword, you can define classes. So after ES6, the above code can be simplified to:

class Book {
  constructor(name, page){
    this.name = name;
    this.page = page;
  }

  getBookInfo() {
    return 'Book is ' + this.name + ', it is ' + this.page
  }
}

Function parameter default values 

For ES6 before, not directly specify a default value for the parameter of the function, but to use alternative methods. like this:

function changeName(name){
    var my_name = name || 'xiao'
    console.log(my_name)
}

changeName('lisa')    // lisa
changeName('')    // xiao
changeName()    // xiao

The above code check function changeNameparameter namehas no value, and if not, a default value is specified xiao. Disadvantage of such an approach is that, if the parameter nameassignment, but the corresponding Boolean value false, the assignment does not work. The last line of code as above, the parameter nameis equal to the null character, the result was changed to a default value.

In ES6 inside, this problem can be solved:

function changeName(name = 'xiao'){
    console.log(my_name)
}

changeName('lisa')    // lisa
changeName('')    // ''
changeName()    // xiao

Arrow function

ES6 allows the use of "arrow" ( =>) function is defined. Arrow function expression syntax is more concise than function expressions. Before and after the change in the function definition for ES6:

let fn = function (name) { 
  return name
};
// es6里面
let fn = name => name;

About compared between a lot of it is not, and if the arrow function takes no arguments or require multiple parameters, use a parameter in parentheses represents the part like this:

let fn = () => 'haha';
// es6之前是这样
let fn = function () { return 'haha' };

If the code block portion than an arrow function statement, it is necessary to use braces to enclose them together, and use the returnstatement returns. If the arrow function only one line statement, and no return value, you can use the following wording, do not write the braces.

let fn = () => console.log('haha');

Use the arrow function Note:

• The body of the function thisobject is defined when the object is located, while you were on when not use.
• Not as a constructor, that is, not use newthe command, otherwise it will throw an error.
• Can not use argumentsthe object, the object does not exist in the body of the function. If you want, you can substitute with rest parameters.
• Not use yieldcommand, and therefore can not function as an arrow Generator function.

Particular attention to this arrow pointing inside the function is variable, but in the interior of the arrow function, this point is fixed.

Template string

The traditional JavaScript language, stitching statements and output templates are usually written like this:

let name = 'javascript', money = 35
let str = 'This is '+name+',it is '+money+' dollar'

console.log(str)    // "This is javascript,it is 35 dollar"

In ES6 which can be written:

let name = 'javascript', money = 35
let str = `This is ${name},it is ${money} dollar`

console.log(str)    // "This is javascript,it is 35 dollar"