本次的ES6語法的彙總總共分為上、中、下三篇，本篇文章為下篇。
往期系列文章：
客套話不多說了，直奔下篇的內容～
async函式
ES2017標準引入了async函式，使得非同步操作更加方便。async函式是Generator函式的語法糖。不打算寫Generator函式，感興趣的話可以看文件。與Generator返回值（Iterator物件）不同，async返回的是一個Promise物件。
用法
async函式返回一個Promise物件，可以使用then方法新增回撥函式。當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句。
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function(result) {
console.log(result);
})
複製程式碼再來看幾種情況加深下印象：
function fun1() {
console.log('fun1');
return 'fun1 result';
}
async function test() {
const result1 = await fun1();
console.log(result1);
console.log('end');
}
test();
// 輸出
// 'fun1'
// 'fun1 result'
// 'end'
複製程式碼async function fun2() {
console.log('fun2');
return 'fun2 result';
}
async function test() {
const result2 = await fun2();
console.log(result2);
console.log('end');
}
test();
// 輸出
// 'fun2'
// 'fun2 result'
// 'end'
複製程式碼正常情況下，await命令後面是一個Promise物件，返回該物件的結果。如果不是Promise物件，就直接返回對應的值。
async function fun3() {
console.log('fun3');
setTimeout(function() {
console.log('fun3 async');
return 'fun3 result';
}, 1000)
}
async function test() {
const result3 = await fun3();
console.log(result3);
console.log('end');
}
test();
// 輸出
// 'fun3'
// undefined
// 'end'
// 'fun3 async'
複製程式碼async function fun4() {
console.log('fun4');
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('fun4 async');
resolve('fun4 result');
}, 1000);
})
}
async function test() {
console.log(result4);
console.log('fun4 sync');
console.log('end');
}
test();
// 輸出
// 'fun4'
// 'fun4 async'
// 'fun4 result'
// 'fun4 sync'
// 'end'
複製程式碼模擬sleep
JavaScript一直沒有休眠的語法，但是藉助await命令就可以讓程式停頓指定的時間。【await要配合async來實現】
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);
})
}
// use
async function one2FiveInAsync() {
for(let i = 1; i <= 5; i++) {
console.log(i);
await sleep(1000);
}
}
one2FiveInAsync();
// 1, 2, 3, 4, 5 每隔一秒輸出數字
複製程式碼一道題
需求：使用async await改寫下面的程式碼，使得輸出的期望結果是每隔一秒輸出0, 1, 2, 3, 4, 5，其中i < 5條件不能變。
for(var i = 0 ; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000)
}
console.log(i);
複製程式碼之前我們講過了用promise的方式實現，這次我們用async await方式來實現：
const sleep = (time) => new Promise((resolve) => {
setTimeout(resolve, time);
});
(async () => {
for(var i = 0; i < 5; i++){
console.log(i);
await sleep(1000);
}
console.log(i);
})();
// 符合條件的輸出 0, 1, 2, 3, 4, 5
複製程式碼比較promise和async
為什麼只比較promise和async呢？因為這兩個用得頻繁，實在的才是需要的，而且async語法是generator的語法糖，generator的說法直接戳async與其他非同步處理方法的比較。
兩者上，async語法寫法上程式碼量少，錯誤處理能力佳，而且更有邏輯語義化。
假定某個 DOM 元素上面，部署了一系列的動畫，前一個動畫結束，才能開始後一個。如果當中有一個動畫出錯，就不再往下執行，返回上一個成功執行的動畫的返回值。
// promise
function chainAnimationsPromise(elem, animations) {
// 變數ret用來儲存上一個動畫的返回值
let ret = null;
// 新建一個空的Promise
let p = Promise.resolve();
// 使用then方法，新增所有動畫
for(let anim of animations) {
p = p.then(function(val) {
ret = val;
return anim(elem);
});
}
// 返回一個部署了錯誤捕捉機制的Promise
return p.catch(function(e) {
/* 忽略錯誤，繼續執行 */
}).then(function() {
return ret;
});
}
複製程式碼// async await
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for(let anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略錯誤，繼續執行 */
}
return ret;
}
複製程式碼類class
在ES6之前，是使用建構函式來模擬類的，現在有了關鍵字class了，甚是開心?
function Person() {}
Person.prototype.sayHello = function(){
console.log('Hi');
};
複製程式碼class Person{
sayHello(){
console.log('Hi!');
}
}
複製程式碼constructor方法
constructor方法是類的預設方法，通過new命令生成物件例項時，自動呼叫該方法，一個類中必須有construtor方法，如果沒有顯式定義，一個空的constructor方法會預設新增。
class Person{}
// 等同於
class Person{
constructor(){}
}
複製程式碼construtor方法也就類似建構函式，在執行new的時候，先跑建構函式，再跑到原型物件上。
取值函式(getter)和存值函式(setter)
與ES5一樣，在類的內部可以使用get和set關鍵字，對某個屬性設定存值函式和取值函式，攔截該屬性的存取行為。
class MyClass {
get prop() {
return 'getter';
}
set prop(value) {
console.log(`setter: ${ value }`)
}
}
let inst = new MyClass();
inst.prop = 123;
// 'setter: 123'
console.log(inst.prop);
// 'getter'
複製程式碼this的指向
類的方法內部如果含有this，它預設是指向類的例項。但是，必須非常小心，一旦單獨使用該方法，很可能報錯。
class Person{
constructor(job) {
this.job = job;
}
printJob() {
console.log(`My job is ${ this.job }`);
}
sayHi() {
console.log(`I love my job -- ${ this.job }.`)
}
}
const person = new Person('teacher');
person.printJob(); // 'My job is teacher'
const { sayHi } = person;
sayHi(); // 報錯: Uncaught TypeError: Cannot read property 'job' of undefined
複製程式碼上面的程式碼中，sayHi方法單獨使用，this會指向該方法執行時所在的環境（由於class內部是嚴格模式，所以this實際上指向undefined）。
修正上面的錯誤也很簡單，也是我們在react開發中經常使用的一種手段：在呼叫建構函式例項化的時候直接繫結例項(this)，修改如下：
class Person{
constructor(job) {
this.job = job;
this.sayHi = this.sayHi.bind(this);
}
}
複製程式碼繼承
ES5中繼承的方式我之前有整理過--JavaScript 中的六種繼承方式。
ES6中的繼承通過extends關鍵字實現，比ES5的實現繼承更加清晰和方便了。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color;
}
}
let cp = new ColorPoint(25, 8, 'green'); // 報錯： Must call super constructor in derived class before accessing 'this' or returning from derived constructor
複製程式碼上面這樣寫，不能繼承建構函式裡面的屬性值和方法。需要在子類的建構函式中加上super關鍵字。改成下面這樣即可：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 呼叫父類的construtor(x, y)，相當於ES5中的call。注意的是，super要放在子類建構函式的第一行
this.color = color;
}
}
let cp = new ColorPoint(25, 8, 'green');
複製程式碼module模組
在ES6之前，社群制定了一些模組的載入的方案，最主要的有CommonJS和AMD兩種。前者用於伺服器，後者用於瀏覽器。
// CommonJS
let { stat, exists, readFile } = require('fs');
複製程式碼ES6在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS和AMD規範，成為瀏覽器和伺服器通用的模組解決方案。
// ES6模組
import { stat, exists, readFile } from 'fs';
複製程式碼各種好處詳細見文件
export命令
export命令用於規定模組的對外介面 。
**一個模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。**你可以理解為一個名稱空間～
想要獲取模組裡面的變數，你就需要匯出export：
// profile.js
const name = 'jia ming';
const sayHi = function() {
console.log('Hi!');
}
export { name, sayHi };
複製程式碼還有一個export default命令，方便使用者（開發者啦）不用閱讀文件就能載入模組（實際上就是輸出一個default變數，而這個變數在import的時候是可以更改的）：
// export-default.js
export default function () {
console.log('foo');
}
複製程式碼其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
複製程式碼import命令
import命令用於輸入其他模組提供的功能。使用export命令定義了模組的對外介面以後，其他JS檔案就可以通過import命令載入這個模組。
// main.js
import { name, sayHi } from './profile.js';
function printName() {
console.log('My name is ' + name);
}
複製程式碼至此，本系列文章談談ES6語法已經寫完，希望文章對讀者有點點幫助。本系列的內容是個人覺得在開發中比較重要的知識點，如果要詳細內容的話，請上相關的文件檢視～?
參考和後話
本次的ES6語法的彙總總共分為上、中、下三篇，本篇文章為下篇。
系列文章至此已經完結！
文章首發在github上--談談ES6語法（彙總下篇）。更多的內容，請戳我的部落格進行了解，能留個star就更好了?