關注「松寶寫代碼」，精選好文，每日一題
?時間永遠是自己的
每分每秒也都是為自己的將來鋪墊和增值
作者：saucxs ｜ songEagle
一、前言
2020.12.23 日剛立的 flag，每日一題，題目類型不限制，可以是：算法題，面試題，闡述題等等。
本文是「每日一題」第 6 題：面試官問：Async/Await 如何通過同步的方式實現異步？
[圖片上傳失敗...(image-42b49d-1611417496818)]
往期「每日一題」：
二、Async/Await 如何通過同步的方式實現異步？
這個題目本身不是特別難，只能說是作為社招的基礎面試題，但是如果想回答好這道題也不是很容易。
不信接著往下看：
1、概括的說
一個函數如果加上 async ，那么該函數就會返回一個 Promise。
await 只能在 async 函數中使用，可以把 async 看成將函數返回值使用 Promise.resolve() 包裹了下。
async 和 await 相比直接使用 Promise 來說，優勢在于處理 then 的調用鏈，能夠更清晰準確的寫出代碼。缺點在于濫用 await 可能會導致性能問題，因為 await 會阻塞代碼，也許之后的異步代碼并不依賴于前者，但仍然需要等待前者完成，導致代碼失去了并發性。
我們來看一下代碼實例：
async function test() {
return "1";
}
console.log(test()); // -> Promise {<resolved>: "1"}
我們再來看一下這個實例：
function sleep() {
return new Promise(resolve => {
setTimeout(() => {
console.log('finish')
resolve("sleep");
}, 2000);
});
}
async function test() {
let value = await sleep();
console.log("object");
}
test()
上面代碼會先打印 finish 然后再打印 object 。因為 await 會等待 sleep 函數 resolve ，所以即使后面是同步代碼，也不會先去執行同步代碼再來執行異步代碼。
2、亮點回答
首先，js 是單線程的（重復三遍），所謂單線程，
意思就是說：執行代碼是一行一行的往下走（即所謂的同步），
如果上面的沒執行完，那就只能等著。
還是舉個例子：
function test() {
let d = Date.now();
for (let i = 0; i < 1e8; i++) {}
console.log(Date.now() - d); // 62ms左右
}
function test1() {
let d = Date.now();
console.log(Date.now() - d); // 0
}
test();
test1();
上面僅僅是一個 for 循環，而在實際應用中，會有大量的網絡請求，它的響應時間是不確定的，這種情況下也要等待嗎？
顯然是不行的，因而 js 設計了異步，即 發起網絡請求（諸如 IO 操作，定時器），由于需要等服務器響應，就先不理會，而是去做其他的事兒，等請求返回了結果的時候再說（即異步）。
那么如何實現異步呢？其實我們平時已經在大量使用了，那就是 callback，實現異步的核心就是回調鉤子，將 cb 作為參數傳遞給異步執行函數，當有了結果后在觸發 cb。想了解更多，可以去看看 event-loop 機制。
之前這種函數嵌套，大量的回調函數，使代碼閱讀起來晦澀難懂，不直觀，形象的稱之為回調地獄（callback hell），所以為了在寫法上能更通俗一點，es6+陸續出現了 Promise、Generator、Async/await，力求在寫法上簡潔明了，可讀性強。
async/await 是參照 Generator 封裝的一套異步處理方案，可以理解為 Generator 的語法糖，
所以了解 async/await 就不得不講一講 Generator,以后我們可以講一下這個。
而 Generator 又依賴于迭代器Iterator，以后我們可以講一下這個。
終于找到源頭了：單向鏈表，以后可以講一下這個。
可以看到，async function 代替了 function*，await 代替了 yield，同時也無需自己手寫一個自動執行器 run 了
現在再來看看async/await 的特點：
- 當 await 后面跟的是 Promise 對象時，才會異步執行，其它類型的數據會同步執行
- 返回的仍然是個 Promise 對象，上面代碼中的 return 'done'; 會直接被下面 then 函數接收到
3、進階回答
async/await 是參照 Generator 封裝的一套異步處理方案，可以理解為 Generator 的語法糖，
所以了解 async/await 就不得不講一講 Generator,
而 Generator 又依賴于迭代器Iterator，
所以就得先講一講 Iterator,
而 Iterator 的思想呢又來源于單向鏈表，
終于找到源頭了：單向鏈表
3.1 什么是單向鏈表？
我們看一下wiki的說明：鏈表（Linked list）是一種常見的基礎數據結構，是一種線性表，但是并不會按線性的順序儲存數據，而是在每一個節點里存到下一個節點的指針（Pointer）。由于不必須按順序儲存，鏈表在插入的時候可以達到 o(1)的復雜度，比另一種線性表順序表快得多，但是查找一個節點或者訪問特定編號的節點則需要 o(n)的時間，而順序表響應的時間復雜度分別是 o(logn)和 o(1)。
總結一下鏈表優點：
- 無需預先分配內存
- 插入/刪除節點不影響其他節點，效率高（典型的例子：git commit）
單向鏈表：是鏈表中最簡單的一種，它包含兩個域，一個信息域和一個指針域。這個鏈接指向列表中的下一個節點，而最后一個節點則指向一個空值。
[圖片上傳失敗...(image-2b5c12-1611417496818)]
一個單向鏈表包含兩個值: 當前節點的值和一個指向下一個節點的鏈接
單鏈特點：節點的鏈接方向是單向的；相對于數組來說，單鏈表的的隨機訪問速度較慢，但是單鏈表刪除/添加數據的效率很高。
理解 js 原型鏈/作用域鏈的話，理解這個很容易，他們是相通的。
3.2 Iterator
Iterator 翻譯過來就是迭代器（遍歷器）讓我們先來看看它的遍歷過程(類似于單向鏈表)：
- 創建一個指針對象，指向當前數據結構的起始位置:
- 第一次調用指針對象的 next 方法，將指針指向數據結構的第一個成員
- 第二次調用指針對象的 next 方法，將指針指向數據結構的第二個成員
- 不斷的調用指針對象的 next 方法，直到它指向數據結構的結束位置
一個對象要變成可迭代的，必須實現 @@iterator 方法，即對象（或它原型鏈上的某個對象）必須有一個名字是 Symbol.iterator 的屬性（原生具有該屬性的有：字符串、數組、類數組的對象、Set 和 Map）：
當一個對象需要被迭代的時候（比如開始用于一個 for..of 循環中），它的 @@iterator 方法被調用并且無參數，然后返回一個用于在迭代中獲得值的迭代器
3.3 Generator
Generator：生成器對象是生成器函數（GeneratorFunction）返回的，它符合可迭代協議和迭代器協議，既是迭代器也是可迭代對象，可以調用 next 方法，但它不是函數，更不是構造函數.
調用一個生成器函數并不會馬上執行它里面的語句，而是返回一個這個生成器的迭代器對象，當這個迭代器的 next() 方法被首次（后續）調用時，其內的語句會執行到第一個（后續）出現 yield 的位置為止（讓執行處于暫停狀），yield 后緊跟迭代器要返回的值。或者如果用的是 yield*（多了個星號），則表示將執行權移交給另一個生成器函數（當前生成器暫停執行），調用 next() （再啟動）方法時，如果傳入了參數，那么這個參數會作為上一條執行的 yield 語句的返回值，
我們來總結一下 Generator 的本質，暫停，它會讓程序執行到指定位置先暫停（yield），然后再啟動（next），再暫停（yield），再啟動（next），而這個暫停就很容易讓它和異步操作產生聯系，因為我們在處理異步時：開始異步處理（網絡求情、IO 操作），然后暫停一下，等處理完了，再該干嘛干嘛。不過值得注意的是，js 是單線程的（又重復了三遍），異步還是異步，callback 還是 callback，不會因為 Generator 而有任何改變。
3.4 Async/Await
async/await 是 Generator 的語法糖，就是一個自執行的generate函數。利用generate函數的特性把異步的代碼寫成“同步”的形式。
覺得這樣是不是可以清晰點了。
Reference
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE
- http://es6.ruanyifeng.com/#docs/iterator
- http://es6.ruanyifeng.com/#docs/async
謝謝支持
1、文章喜歡的話可以「分享，點贊，在看」三連哦。
2、作者昵稱：saucxs，songEagle，松寶寫代碼。「松寶寫代碼」公眾號作者，每日一題，實驗室等。一個愛好折騰，致力于全棧，正在努力成長的字節跳動工程師，星辰大海，未來可期。內推字節跳動各個部門各個崗位。
3、長按下面圖片，關注「松寶寫代碼」，是獲取開發知識體系構建，精選文章，項目實戰，實驗室，每日一道面試題，進階學習，思考職業發展，涉及到JavaScript，Node，Vue，React，瀏覽器，http，算法，端相關，小程序等領域，希望可以幫助到你，我們一起成長～
[圖片上傳失敗...(image-23aaf0-1611417496818)]
字節內推福利
- 回復「校招」獲取內推碼
- 回復「社招」獲取內推
- 回復「實習生」獲取內推
后續會有更多福利
學習資料福利
回復「算法」獲取算法學習資料
往期「每日一題」
1、JavaScript && ES6
第 16 題：【每日一題】面試官問：JS中如何全面進行客戶端檢測？
第 15 題：【每日一題】面試官問：JS類型判斷有哪幾種方法？
第 14 題：【每日一題】面試官問：談談你對JS對象的創建和引申
第 12 題[每日一題]面試官問：JS引擎的執行過程（二）
第 11 題[每日一題]面試官問：JS引擎的執行過程（一）
第 10 題[每日一題]面試官問：詳細說一下JS數據類型
2、瀏覽器
3、Vue
4、HTML5
5、算法
第 31 道[【每日一題】(31題)面試官:你對圖論了解多少？(一)
第 26 道【每日一題】(26題)算法題:最長公共前綴？
