es6

• 模板對象

es5寫法
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;
es6寫法
幸運的是，在ES6中，我們可以使用新的語法$ {NAME}，並把它放在反引號裏`：
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

• 多行字符串

es5的多行字符串
var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
然而在ES6中，僅僅用反引號就可以解決了：
var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;

• 函數的擴展(默認參數)

 1.函數的默認參數
這種寫法的缺點在於，如果參數y賦值了，但是對應的布爾值爲false，則該賦值不起作用。就像上面代碼的最後一行，參數y等於空字符，結果被改爲默認值。
  function log(x, y) {
         y = y || 'World';
         console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
ES6 允許爲函數的參數設置默認值，即直接寫在參數定義的後面。
function log(x, y = 'World') {
         console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

 var link = function(height = 50, color = 'red', url = 'http://azat.co') {
   console.log(color)  ----red
   color = 'yellow'
   console.log(color) ---yellow
}

• 箭頭函數

1. 具有一個參數的簡單函數
var single = a => a
single('hello, world') // 'hello, world'
　　

2. 沒有參數的需要用在箭頭前加上小括號
var log = () => {
    alert('no param')
}
　　
3. 多個參數需要用到小括號，參數間逗號間隔，例如兩個數字相加
var add = (a, b) => a + b
add(3, 8) // 11
　　

4. 函數體多條語句需要用到大括號
var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
        return a + b
    } else {
        return 0
    }
}

5. 返回對象時需要用小括號包起來，因爲大括號被佔用解釋爲代碼塊了
var getHash = arr => {
    // ...
    return ({
        name: 'Jack',
        age: 33
    })
}
　　
6. 直接作爲事件handler
document.addEventListener('click', ev => {
    console.log(ev)
})
　　
7. 作爲數組排序回調
var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
        return 1
    } else {
        return -1
    }
})
arr // [1, 2, 3, 4, 8, 9]

二、注意點
1. typeof運算符和普通的function一樣
var  func = a => a
console.log(typeof func); // "function"`

2. instance of也返回true，表明也是Function的實例
console.log(func  instanceof  Function); // true

3. this固定，不再善變

obj = {

data: ['John Backus', 'John Hopcroft'],

init: function() {
document.onclick = ev => {
alert(this.data) // ['John Backus', 'John Hopcroft']
}

// 非箭頭函數
// document.onclick = function(ev) {`
//     alert(this.data) // undefined`
// }

obj.init()
這個很有用，再不用寫me，self，_this了，或者bind。

4. 箭頭函數不能用new
var Person = (name, age) => {
this.name = name
this.age = age
}

var p = new Func('John', 33) // error

5. 不能使用argument
var func = () => {
console.log(arguments)
}
func(55) //

• 類（class）
  類相當於實例的原型（靜態方法+構造函數+原型方法）， 所有在類中定義的方法， 都會被實例繼承。 如果在一個方法前， 加上static關鍵字， 就表示該方法不會被實例繼承， 而是直接通過類來調用， 這就稱爲“ 靜態方法”,調用靜態方法可以無需創建對象

class Person{
//(靜態方法必須通過類名調用，不可以使用實例對象調用)
    static showInfo(){
        console.log('hello');
    }
//構造函數，通過實例調用
    constructor(sex,weight){
        this.sex = sex;
        this.weight = weight;
    }
    showWeight(){
        console.log('weight:'+this.weight); 
    }
    showSex(){
        console.log('sex:'+this.sex);  
    }
}
let p = new Person('female','75kg');
p.showWeight();----  weight:75kg
p.showSex();-----  sex:female
p.showInfo(); -----報錯，不是一個函數
Person.showInfo();---hello
//繼承
class Student extends Person{
    constructor(sex,weight,score){
        super(sex,weight);//調用父類的構造函數,這個步驟是必須的
        this.score = score;
    }
    showScore(){
        console.log('score:'+this.score);
    }
}
let stu = new Student('male','70kg','100');
stu.showScore();---  score:100
stu.showSex();----sex:male
stu.showWeight();--- weight:70kg
Student.showInfo(); -----hello （可以用父類的靜態方法，類調用）

靜態方法也是可以從super對象上調用的。
class Foo {  
    static classMethod() {  
        return 'hello';  
    }  
}  
class Bar extends Foo {  
    static classMethod() {  
        return super.classMethod() + ', too';  
    }  
      }  
Bar.classMethod();  

Promise

https://blog.csdn.net/Wbiokr/article/details/79490390

異步操作和async函數

https://blog.csdn.net/qiangzhedc/article/details/76278802

ES6系列文章 異步神器async-await

https://segmentfault.com/a/1190000011526612