為前端人員要回答這個問題，需要了解這三個知識點：

• 同步
• 異步
• Async/Await

首先，js 是單線程的，所謂單線程，通俗的講就是，執行代碼是一行一行的往下走（即所謂的同步）

js的核心就是單線程，新出的一些標準（web worker、atomics、SharedArrayBuffer等），允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質，類比一下node也是單線程，在準確的說是單線程異步非阻塞模式

上面僅僅是一個 for 循環，而在實際應用中，會有大量的網絡請求，它的響應時間是不確定的，這種情況下也要一直等么？顯然是不行的，因而 js 設計了異步，即 發起網絡請求（諸如 IO 操作，定時器），由于需要等服務器響應，就先不理會，而是去做其他的事兒，等請求返回了結果的時候再說（即異步）。

那么如何實現異步呢？其實我們平時已經在大量使用了，那就是 callback，例如：

$.ajax({

url: 'http://xxx',

success: function(res) {

console.log(res);

},

});

success 作為函數傳遞過去并不會立即執行，而是等請求成功了才執行，即回調函數callback

const fs = require('fs');
fs.rename('舊文件.txt', '新文件.txt', err => {
 if (err) throw err;
 console.log('重命名完成');
});

和網絡請求類似，等到 IO 操作有了結果（無論成功與否）才會執行第三個參數：(err)=>{}

從上面我們就可以看出，實現異步的核心就是回調鉤子，將 cb 作為參數傳遞給異步執行函數，當有了結果后在觸發 cb。想了解更多，去看看 event-loop 機制吧。

至于 async/await 是如何出現的呢，在 es6 之前，大多 js 數項目中會有類似這樣的代碼：

ajax1(url, () => {
 ajax2(url, () => {
 ajax3(url, () => {
 // do something
 });
 });
});

這種函數嵌套，大量的回調函數，使代碼閱讀起來晦澀難懂，不直觀，形象的稱之為回調地獄（callback hell），所以為了在寫法上能更通俗一點，es6+陸續出現了 Promise、Generator、Async/await，力求在寫法上簡潔明了，可讀性強。

async/await 是參照 Generator 封裝的一套異步處理方案，可以理解為 Generator 的語法糖，

所以了解 async/await 就不得不講一講 Generator,

而 Generator 又依賴于迭代器Iterator，

所以就得先講一講 Iterator,

而 Iterator 的思想呢又來源于單向鏈表，

終于找到源頭了：單向鏈表

1. 單向鏈表

wiki：鏈表（Linked list）是一種常見的基礎數據結構，是一種線性表，但是并不會按線性的順序儲存數據，而是在每一個節點里存到下一個節點的指針（Pointer）。由于不必須按順序儲存，鏈表在插入的時候可以達到 o(1)的復雜度，比另一種線性表順序表快得多，但是查找一個節點或者訪問特定編號的節點則需要 o(n)的時間，而順序表響應的時間復雜度分別是 o(logn)和 o(1)。

總結一下鏈表優點：

• 無需預先分配內存
• 插入/刪除節點不影響其他節點，效率高（典型的例子：dom 操作）

單向鏈表：是鏈表中最簡單的一種，它包含兩個域，一個信息域和一個指針域。這個鏈接指向列表中的下一個節點，而最后一個節點則指向一個空值。

一個單向鏈表包含兩個值: 當前節點的值和一個指向下一個節點的鏈接

單鏈特點：節點的鏈接方向是單向的；相對于數組來說，單鏈表的的隨機訪問速度較慢，但是單鏈表刪除/添加數據的效率很高。

理解 js 原型鏈/作用域鏈的話，理解這個很容易，他們是相通的。

那么如何設計一個單向鏈表呢？這個取決于我們需要哪些操作，通常有：

• append(element)：追加節點
• insert(element,index)：在索引位置插入節點
• remove(element)：刪除第一個匹配到的節點
• removeAt(index)：刪除指定索引節點
• removeAll(element)：刪除所有匹配的節點
• get(index)：獲取指定索引的節點信息
• set(element,index)：修改指定索引的節點值
• indexOf(element)：獲取某節點的索引位置
• clear()：清除所有節點
• length()：返回節點長度
• printf()：打印節點信息

看到這些方法是不是有些許熟悉，當你用原生 js 或 jq 時常會用上面類似的方法，現在根據上面列出的方法進行實現一個單向鏈：

通過以上，我假裝你明白什么是單向鏈表，并且能夠用代碼實現一個單向鏈表了，下一步開始說一說迭代器 Iterator

2. Iterator

Iterator 翻譯過來就是**迭代器（遍歷器）**讓我們先來看看它的遍歷過程(類似于單向鏈表)：

• 創建一個指針對象，指向當前數據結構的起始位置
• 第一次調用指針對象的 next 方法，將指針指向數據結構的第一個成員
• 第二次調用指針對象的 next 方法，將指針指向數據結構的第二個成員
• 不斷的調用指針對象的 next 方法，直到它指向數據結構的結束位置

一個對象要變成可迭代的，必須實現 @@iterator 方法，即對象（或它原型鏈上的某個對象）必須有一個名字是 Symbol.iterator 的屬性（原生具有該屬性的有：字符串、數組、類數組的對象、Set 和 Map）：

當一個對象需要被迭代的時候（比如開始用于一個 for..of 循環中），它的 @@iterator 方法被調用并且無參數，然后返回一個用于在迭代中獲得值的迭代器

迭代器協議：產生一個有限或無限序列的值，并且當所有的值都已經被迭代后，就會有一個默認的返回值

當一個對象只有滿足下述條件才會被認為是一個迭代器：

它實現了一個 next() 的方法，該方法必須返回一個對象,對象有兩個必要的屬性：

• done（bool）

true：迭代器已經超過了可迭代次數。這種情況下,value 的值可以被省略

false：迭代器可以產生序列中的下一個值。這等效于沒有指定 done 這個屬性

• value 迭代器返回的任何 JavaScript 值。done 為 true 時可省略

根據上面的規則，咱們來自定義一個簡單的迭代器：

我們還可以自定義一個可迭代對象：

3. Generator

Generator：生成器對象是生成器函數（GeneratorFunction）返回的，它符合可迭代協議和迭代器協議，既是迭代器也是可迭代對象，可以調用 next 方法，但它不是函數，更不是構造函數

生成器函數（GeneratorFunction）：

function* name([param[, param[, ... param]]]) { statements }

• name：函數名
• param：參數
• statements：js 語句

調用一個生成器函數并不會馬上執行它里面的語句，而是返回一個這個生成器的迭代器對象，當這個迭代器的 next() 方法被首次（后續）調用時，其內的語句會執行到第一個（后續）出現 yield 的位置為止（讓執行處于暫停狀），yield 后緊跟迭代器要返回的值?；蛘呷绻玫氖?yield*（多了個星號），則表示將執行權移交給另一個生成器函數（當前生成器暫停執行），調用 next() （再啟動）方法時，如果傳入了參數，那么這個參數會作為上一條執行的 yield 語句的返回值，例如：

看到這里，你可能會問，Generator 和 callback 有啥關系，如何處理異步呢？其實二者沒有任何關系，我們只是通過一些方式強行的它們產生了關系，才會有 Generator 處理異步

我們來總結一下 Generator 的本質，暫停，它會讓程序執行到指定位置先暫停（yield），然后再啟動（next），再暫停（yield），再啟動（next），而這個暫停就很容易讓它和異步操作產生聯系，因為我們在處理異步時：開始異步處理（網絡求情、IO 操作），然后暫停一下，等處理完了，再該干嘛干嘛。不過值得注意的是，js 是單線程的（又重復了三遍），異步還是異步，callback 還是 callback，不會因為 Generator 而有任何改變

下面來看看，用 Generator 實現異步：

// g1: { value: Promise { <pending> }, done: false }
// res1: {
// "a": 1
// }
// {
// "a": 1
// }
// g2: { value: Promise { <pending> }, done: false }
// res2: {
// "b": 2
// }
// {
// "b": 2
// }

以上代碼是 Generator 和 callback 結合實現的異步，可以看到，仍然需要手動執行 .then 層層添加回調，但由于 next() 方法返回對象 {value: xxx,done: true/false} 所以我們可以簡化它，寫一個自動執行器：

說了這么多，怎么還沒有到 async/await，馬上來了（其實我已經漏了一些內容沒說：Promise 和 callback 的關系，thunk 函數，co 庫，感興趣的可以去 google 一下，yuanyifeng 老師講的es6 入門非常棒，我時不時的都會去看一看）

首先，async/await 是 Generator 的語法糖，上面我是分割線下的第一句已經講過，先來看一下二者的對比：

可以看到，async function 代替了 function*，await 代替了 yield，同時也無需自己手寫一個自動執行器 run 了

現在再來看看async/await 的特點：

• 當 await 后面跟的是 Promise 對象時，才會異步執行，其它類型的數據會同步執行
• 執行 const res = readFile(); 返回的仍然是個 Promise 對象，上面代碼中的 return 'done';會直接被下面 then 函數接收到

res.then(data => {
 console.log(data); // done
});

啊，終于完了，一個 async-await 連帶出來這么多知識點，以后面試被問到它的原理時，希望能夠幫助到你