このコードの出力は何になりますか?

レッスンに戻る

          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。