JavaScript面试题三

一、解释JavaScript中的事件循环？

JavaScript中的事件循环是处理异步操作和回调机制的核心。它允许JavaScript在单线程环境中执行代码，同时能够响应用户交互、处理UI渲染以及执行网络请求等异步操作。事件循环的工作机制主要依赖于任务队列（Task Queue）和微任务队列（Microtask Queue）。

以下是事件循环的基本步骤：

1. 调用栈（Call Stack）：JavaScript引擎有一个单线程调用栈，用于存储函数调用。当代码执行时，引擎会将函数调用压入调用栈。当一个函数执行完毕后，它的调用记录会从栈中弹出，控制权会返回给之前的函数调用。
2. 执行同步代码：JavaScript首先会执行所有的同步代码，即按照代码书写顺序，一行一行地执行。这些代码会被压入调用栈中等待执行。
3. 遇到异步操作：当JavaScript遇到异步操作（如setTimeout、setInterval、Promise、事件监听器等）时，它不会阻塞后续代码的执行，而是将异步操作放入一个任务队列中。同时，JavaScript引擎会继续执行后续的同步代码。
4. 执行回调函数：当异步操作完成后，相应的回调函数会被放入任务队列中等待执行。此时，JavaScript引擎会检查调用栈是否为空。如果调用栈为空，那么事件循环会从任务队列中取出一个任务（回调函数）并将其压入调用栈中执行。这个过程会不断重复，形成一个循环，这就是事件循环。
5. 微任务队列：除了任务队列外，JavaScript还有一个微任务队列。某些异步操作（如Promise）在完成后会将回调函数放入微任务队列中，而不是任务队列。在每次事件循环的末尾，JavaScript引擎会先检查微任务队列是否为空。如果微任务队列不为空，那么它会先执行微任务队列中的所有任务，然后再从任务队列中取出一个任务执行。这个过程会不断重复，直到微任务队列和任务队列都为空。

通过事件循环和任务队列/微任务队列的机制，JavaScript可以在单线程环境中高效地处理异步操作和回调机制，确保程序的流畅运行和用户体验的优化。

二、解释JavaScript中同步代码和异步代码的区别？

在JavaScript中，同步代码和异步代码的主要区别在于它们的执行方式和对程序流程的影响。

同步代码（Synchronous Code）

• 执行方式：同步代码按照代码书写的顺序，一行一行地执行。在执行过程中，每一行代码都必须等待上一行代码执行完毕后才能继续执行。
• 阻塞：同步代码在执行时会阻塞后续代码的执行。如果某个同步操作（如文件读写、网络请求等）需要花费较长时间，那么整个程序都会被阻塞，直到该操作完成。
• 特点：同步代码简单直观，易于理解和调试。但是，在处理耗时操作时，同步代码会导致程序卡顿或无法响应，影响用户体验。

异步代码（Asynchronous Code）

• 执行方式：异步代码不会按照代码书写的顺序立即执行。相反，它会将耗时操作放入一个任务队列中，然后立即返回继续执行后续代码。当耗时操作完成后，其回调函数会被放入事件循环的任务队列中等待执行。
• 非阻塞：异步代码在执行时不会阻塞后续代码的执行。这意味着即使某个异步操作需要花费较长时间，程序仍然可以继续执行其他任务，从而保持程序的流畅性和响应性。
• 回调和Promise：异步代码通常使用回调函数或Promise来处理操作结果。回调函数是在异步操作完成后被调用的函数，而Promise则是一个表示异步操作最终完成或失败的对象。
• 特点：异步代码可以提高程序的性能和响应性，但也可能导致代码结构复杂、难以理解和调试。因此，在使用异步代码时，需要谨慎处理回调和Promise的嵌套和错误处理等问题。

示例

同步代码示例：

console.log('开始同步操作');

// 模拟耗时操作
function syncOperation() {
  for (let i = 0; i < 1e7; i++) {
    // 空循环，模拟耗时
  }
  console.log('同步操作完成');
}

syncOperation();
console.log('同步操作后的代码');

// 输出顺序：开始同步操作 -> 同步操作完成 -> 同步操作后的代码

异步代码示例（使用Promise）：

console.log('开始异步操作');

// 模拟异步操作
function asyncOperation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('异步操作完成');
      resolve();
    }, 1000);
  });
}

asyncOperation().then(() => {
  console.log('异步操作后的代码');
});

// 输出顺序：开始异步操作 -> 异步操作后的代码（可能立即执行）-> 异步操作完成（1秒后执行）

在上面的示例中，可以看到同步代码和异步代码在执行顺序和程序流程上的区别。