這段程式碼的輸出結果是什麼？

返回課程

          console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

console.log(7);

主控台輸出結果為：1 7 3 5 2 6 4。

這個任務很簡單，我們只需要知道微任務和巨集任務佇列如何運作即可。

讓我們逐步了解發生了什麼事。

          console.log(1);
// The first line executes immediately, it outputs `1`.
// Macrotask and microtask queues are empty, as of now.

setTimeout(() => console.log(2));
// `setTimeout` appends the callback to the macrotask queue.
// - macrotask queue content:
//   `console.log(2)`

Promise.resolve().then(() => console.log(3));
// The callback is appended to the microtask queue.
// - microtask queue content:
//   `console.log(3)`

Promise.resolve().then(() => setTimeout(() => console.log(4)));
// The callback with `setTimeout(...4)` is appended to microtasks
// - microtask queue content:
//   `console.log(3); setTimeout(...4)`

Promise.resolve().then(() => console.log(5));
// The callback is appended to the microtask queue
// - microtask queue content:
//   `console.log(3); setTimeout(...4); console.log(5)`

setTimeout(() => console.log(6));
// `setTimeout` appends the callback to macrotasks
// - macrotask queue content:
//   `console.log(2); console.log(6)`

console.log(7);
// Outputs 7 immediately.
        

總之，

數字 1 和 7 會立即顯示，因為簡單的 console.log 呼叫不會使用任何佇列。
然後，在主程式碼流程結束後，微任務佇列會執行。
- 它有以下指令：console.log(3); setTimeout(...4); console.log(5)。
- 數字 3 和 5 會顯示，而 setTimeout(() => console.log(4)) 會將 console.log(4) 呼叫新增到巨集任務佇列的結尾。
- 巨集任務佇列現在為：console.log(2); console.log(6); console.log(4)。
微任務佇列清空後，巨任務佇列執行。它會輸出 2、6、4。

最後，我們會得到輸出：1 7 3 5 2 6 4。