async/await 就是 Generator 的語法糖，使得異步操作變得更加方便。來張圖對比一下:

async 函數就是將 Generator 函數的星號（*）替換成 async，將 yield 替換成await。

我們說 async 是 Generator 的語法糖，那么這個糖究竟甜在哪呢？

1）async函數內置執行器，函數調用之后，會自動執行，輸出最后結果。而Generator需要調用next或者配合co模塊使用。

2）更好的語義，async和await，比起星號和yield，語義更清楚了。async表示函數里有異步操作，await表示緊跟在后面的表達式需要等待結果。

3）更廣的適用性。co模塊約定，yield命令后面只能是 Thunk 函數或 Promise 對象，而async 函數的 await 命令后面，可以是 Promise 對象和原始類型的值。

4）返回值是Promise，async函數的返回值是 Promise 對象，Generator的返回值是 Iterator，Promise 對象使用起來更加方便。

async 函數的實現原理，就是將 Generator 函數和自動執行器，包裝在一個函數里。

具體代碼試下如下(和spawn的實現略有差異，個人覺得這樣寫更容易理解)，如果你想知道如何一步步寫出 my_co ，可戳: github.com/YvetteLau/B…

function my_co(it) {
    return new Promise((resolve, reject) => {
        function next(data) {
            try {
                var { value, done } = it.next(data);
            }catch(e){
                return reject(e);
            }
            if (!done) { 
                //done為true,表示迭代完成
                //value 不一定是 Promise，可能是一個普通值。使用 Promise.resolve 進行包裝。
                Promise.resolve(value).then(val => {
                    next(val);
                }, reject);
            } else {
                resolve(value);
            }
        }
        next(); //執行一次next
    });
}
function* test() {
    yield new Promise((resolve, reject) => {
        setTimeout(resolve, 100);
    });
    yield new Promise((resolve, reject) => {
        // throw Error(1);
        resolve(10)
    });
    yield 10;
    return 1000;
}

my_co(test()).then(data => {
    console.log(data); //輸出1000
}).catch((err) => {
    console.log("err: ", err);
});

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：談談對 async/await 的理解，async/await 的實現原理是什么");

await 命令后面的Promise對象，運行結果可能是 rejected，此時等同于 async 函數返回的 Promise 對象被reject。因此需要加上錯誤處理，可以給每個 await 后的 Promise 增加 catch 方法；也可以將 await 的代碼放在 try...catch 中。

多個await命令后面的異步操作，如果不存在繼發關系，最好讓它們同時觸發。

//下面兩種寫法都可以同時觸發
//法一
async function f1() {
    await Promise.all([
        new Promise((resolve) => {
            setTimeout(resolve, 600);
        }),
        new Promise((resolve) => {
            setTimeout(resolve, 600);
        })
    ])
}
//法二
async function f2() {
    let fn1 = new Promise((resolve) => {
            setTimeout(resolve, 800);
        });
    
    let fn2 = new Promise((resolve) => {
            setTimeout(resolve, 800);
        })
    await fn1;
    await fn2;
}

await命令只能用在async函數之中，如果用在普通函數，會報錯。

async 函數可以保留運行堆棧。

/**
* 函數a內部運行了一個異步任務b()。當b()運行的時候，函數a()不會中斷，而是繼續執行。
* 等到b()運行結束，可能a()早就* 運行結束了，b()所在的上下文環境已經消失了。
* 如果b()或c()報錯，錯誤堆棧將不包括a()。
*/
function b() {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 200)
    });
}
function c() {
    throw Error(10);
}
const a = () => {
    b().then(() => c());
};
a();
/**
* 改成async函數
*/
const m = async () => {
    await b();
    c();
};
m();

報錯信息如下，可以看出 async 函數可以保留運行堆棧。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：使用 async/await 需要注意什么？

在代碼實現前，我們需要先了解 Promise.race 的特點：

Promise.race返回的仍然是一個Promise. 它的狀態與第一個完成的Promise的狀態相同。它可以是完成（ resolves），也可以是失敗（rejects），這要取決于第一個Promise是哪一種狀態。

如果傳入的參數是不可迭代的，那么將會拋出錯誤。

如果傳的參數數組是空，那么返回的 promise 將永遠等待。

如果迭代包含一個或多個非承諾值和/或已解決/拒絕的承諾，則 Promise.race 將解析為迭代中找到的第一個值。

Promise.race = function (promises) {
    //promises 必須是一個可遍歷的數據結構，否則拋錯
    return new Promise((resolve, reject) => {
        if (typeof promises[Symbol.iterator] !== "function") {
            //真實不是這個錯誤
            Promise.reject("args is not iteratable!");
        }
        if (promises.length === 0) {
            return;
        } else {
            for (let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then((data) => {
                    resolve(data);
                    return;
                }, (err) => {
                    reject(err);
                    return;
                });
            }
        }
    });
}

測試代碼:

//一直在等待態
Promise.race([]).then((data) => {
    console.log("success ", data);
}, (err) => {
    console.log("err ", err);
});
//拋錯
Promise.race().then((data) => {
    console.log("success ", data);
}, (err) => {
    console.log("err ", err);
});
Promise.race([
    new Promise((resolve, reject) => { setTimeout(() => { resolve(100) }, 1000) }),
    new Promise((resolve, reject) => { setTimeout(() => { resolve(200) }, 200) }),
    new Promise((resolve, reject) => { setTimeout(() => { reject(100) }, 100) })
]).then((data) => {
    console.log(data);
}, (err) => {
    console.log(err);
});

引申: Promise.all/Promise.reject/Promise.resolve/Promise.prototype.finally/Promise.prototype.catch 的實現原理，如果還不太會，戳:Promise源碼實現

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：如何實現 Promise.race？

5.可遍歷數據結構的有什么特點？

一個對象如果要具備可被 for...of 循環調用的 Iterator 接口，就必須在其 Symbol.iterator 的屬性上部署遍歷器生成方法(或者原型鏈上的對象具有該方法)

PS: 遍歷器對象根本特征就是具有next方法。每次調用next方法，都會返回一個代表當前成員的信息對象，具有value和done兩個屬性。

//如為對象添加Iterator 接口;
let obj = {
    name: "Yvette",
    age: 18,
    job: "engineer",
    [Symbol.iterator]() {
        const self = this;
        const keys = Object.keys(self);
        let index = 0;
        return {
            next() {
                if (index < keys.length) {
                    return {
                        value: self[keys[index++]],
                        done: false
                    };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

for(let item of obj) {
    console.log(item); //Yvette  18  engineer
}

使用 Generator 函數(遍歷器對象生成函數)簡寫 Symbol.iterator 方法，可以簡寫如下:

let obj = {
    name: "Yvette",
    age: 18,
    job: "engineer",
    * [Symbol.iterator] () {
        const self = this;
        const keys = Object.keys(self);
        for (let index = 0;index < keys.length; index++) {
            yield self[keys[index]];//yield表達式僅能使用在 Generator 函數中
        } 
    }
};

原生具備 Iterator 接口的數據結構如下。

Array

Map

Set

String

TypedArray

函數的 arguments 對象

NodeList 對象

ES6 的數組、Set、Map 都部署了以下三個方法: entries() / keys() / values()，調用后都返回遍歷器對象。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：可遍歷數據結構的有什么特點？

在 requestAnimationFrame 之前，我們主要使用 setTimeout/setInterval 來編寫JS動畫。

編寫動畫的關鍵是循環間隔的設置，一方面，循環間隔足夠短，動畫效果才能顯得平滑流暢；另一方面，循環間隔還要足夠長，才能確保瀏覽器有能力渲染產生的變化。

大部分的電腦顯示器的刷新頻率是60HZ，也就是每秒鐘重繪60次。大多數瀏覽器都會對重繪操作加以限制，不超過顯示器的重繪頻率，因為即使超過那個頻率用戶體驗也不會提升。因此，最平滑動畫的最佳循環間隔是 1000ms / 60 ，約為16.7ms。

setTimeout/setInterval 有一個顯著的缺陷在于時間是不精確的，setTimeout/setInterval 只能保證延時或間隔不小于設定的時間。因為它們實際上只是把任務添加到了任務隊列中，但是如果前面的任務還沒有執行完成，它們必須要等待。

requestAnimationFrame 才有的是系統時間間隔，保持最佳繪制效率，不會因為間隔時間過短，造成過度繪制，增加開銷；也不會因為間隔時間太長，使用動畫卡頓不流暢，讓各種網頁動畫效果能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。

綜上所述，requestAnimationFrame 和 setTimeout/setInterval 在編寫動畫時相比，優點如下:

1.requestAnimationFrame 不需要設置時間，采用系統時間間隔，能達到最佳的動畫效果。

2.requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成。

3.當 requestAnimationFrame() 運行在后臺標簽頁或者隱藏的