这段代码的输出是什么？ - JavaScript 中文教程

返回课程

          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。

这个任务很简单，我们只需要了解microtask 和 macrotask 队列的工作原理。

让我们一步一步地看看发生了什么。

          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 调用不使用任何队列。
然后，在主代码流完成后，microtask 队列运行。
- 它包含以下命令：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。