JavaScript 開發(fā)中的常見面試問題

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2024年11月29日 9:31 本文熱度 1256

在本文中，我們將探討許多開發(fā)人員難以解決的 JavaScript 面試問題，但這些是 JavaScript 的基本原理。掌握它們不僅可以提高您的面試成績，還可以提高您創(chuàng)建和調(diào)試 JavaScript 代碼的能力。

JavaScript 是單線程語言還是多線程語言？

JavaScript 是一種單線程語言，這意味著它使用單個調(diào)用堆棧來執(zhí)行代碼。它按順序一次處理一個任務(wù)，每個任務(wù)都需要在下一個任務(wù)開始之前完成。因此，JavaScript 無法一次運(yùn)行多個任務(wù)。

例：

console.log("Start");

setTimeout(() => {
  console.log("Task 1 complete");
}, 2000); // Simulate a task that takes 2 seconds

console.log("Middle");

setTimeout(() => {
  console.log("Task 2 complete");
}, 1000); // Simulate a task that takes 1 second

console.log("End");

你能預(yù)測輸出嗎？我看看。在上面的代碼中，首先記錄消息 Start、Middle 和 End，因為它們是同步代碼。之后，打印 Task 2 complete，然后打印 Task 1 complete這是因為 setTimeout 是異步的，它的回調(diào)只有在同步代碼完成運(yùn)行后才會執(zhí)行。

如何在 JavaScript 中實現(xiàn)異步操作

JavaScript 使用 Promise 處理異步操作。Promise 是一個對象，它表示異步操作的最終完成（或失敗）。當(dāng) Promise 解析或拒絕時，它的回調(diào)被放置在微任務(wù)隊列中。

事件循環(huán)通過在空閑時將回調(diào)推送到調(diào)用堆棧上來處理這些回調(diào)，從而確保異步操作得到有效管理并且不會阻塞主線程。

例：

console.log("Start");

// Creating a Promise that resolves after 1 second
const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Promise Resolved");
  }, 1000);
});

// Adding a callback to be executed when the Promise resolves
promise.then((message) => {
  console.log(message);
});

console.log("End");

你能預(yù)測輸出嗎？我看看。在上面的代碼中，首先記錄 Start 和 End，因為它們是同步代碼。1 秒后，Promise 解析并記錄 Promise Resolved。發(fā)生這種情況是因為事件循環(huán)僅在同步代碼完成后才處理微任務(wù)隊列。

為什么你應(yīng)該避免阻塞 JavaScript 中的主線程

JavaScript 是一種單線程語言，這意味著如果主線程被阻塞，則在當(dāng)前任務(wù)完成之前，其他代碼都無法運(yùn)行。這可能會導(dǎo)致顯著的減速，甚至導(dǎo)致應(yīng)用程序崩潰。為了保持流暢的性能并確保應(yīng)用程序保持響應(yīng)，最佳做法是避免阻塞主線程。你可以使用 Promise 和 async/await 來有效地處理異步任務(wù)。

例：

console.log("Start");

// Blocking the main thread with a long-running operation
function blockMainThread() {
  const start = Date.now();
  while (Date.now() - start < 3000) {
    // Busy-wait for 3 seconds
  }
  console.log("Blocking Operation Complete");
}

blockMainThread();

console.log("End");

你能預(yù)測輸出嗎？讓我們來分析一下。在上面的代碼中，首先打印 Start。然后調(diào)用 blockMainThread（）函數(shù)。在此函數(shù)中，一個名為 start 的變量被初始化為當(dāng)前時間。while 循環(huán)一直運(yùn)行到 3 秒過去（Date.now（） - start < 3000）。此循環(huán)會阻止主線程，因為它會一直運(yùn)行，從而阻止執(zhí)行任何其他代碼。循環(huán)完成后，將記錄 Blocking Operation Complete，然后記錄 End

JavaScript 如何執(zhí)行代碼

JavaScript 是一種單線程語言，這意味著它按順序執(zhí)行代碼，一次執(zhí)行一個任務(wù)。當(dāng) JavaScript 代碼運(yùn)行時，它會創(chuàng)建一個全局執(zhí)行上下文并將其推送到調(diào)用堆棧上。此全局執(zhí)行上下文包含所有全局變量、函數(shù)和引用，例如 this 和 window 對象。

每當(dāng)調(diào)用函數(shù)時，JavaScript 都會為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文，并將其推送到調(diào)用堆棧上。然后 JavaScript 執(zhí)行函數(shù)內(nèi)的代碼。函數(shù)完成運(yùn)行后，其執(zhí)行上下文將從調(diào)用堆棧中彈出，將控制權(quán)返回給前一個上下文。

例：

const language = "JavaScript";

function print() {
  console.log("Follow @amitrai_dev for more such articles!");
}

console.log(language);

print();

執(zhí)行上述代碼時，JavaScript 會創(chuàng)建一個全局執(zhí)行上下文，其中包括全局變量 language 和函數(shù) print（）這個函數(shù)執(zhí)行從打印 language 變量的值開始，即 JavaScript，接下來調(diào)用 print（）函數(shù)，為其創(chuàng)建一個新的執(zhí)行上下文。在 print（）函數(shù)中，消息 Follow @amitrai_dev for more such articles! 被打印到控制臺。print（）函數(shù)完成后，其執(zhí)行上下文將從調(diào)用堆棧中刪除。最后，全局執(zhí)行上下文結(jié)束，標(biāo)志著程序的結(jié)束。

什么是 JavaScript 中的事件循環(huán)

JavaScript 中的事件循環(huán)是一種監(jiān)控調(diào)用堆棧和任務(wù)隊列的機(jī)制。當(dāng)調(diào)用堆棧為空時，事件循環(huán)從任務(wù)隊列中獲取回調(diào)函數(shù)，并將它們推送到調(diào)用堆棧上執(zhí)行。任務(wù)隊列有兩種類型：任務(wù)隊列（或宏任務(wù)隊列）和微任務(wù)隊列（或優(yōu)先級隊列）。微任務(wù)隊列具有更高的優(yōu)先級，并在任務(wù)隊列之前處理。事件循環(huán)通過管理異步操作來創(chuàng)造多線程的錯覺，即使 JavaScript 本身是單線程的。

例：

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise Resolved"));

console.log("End");

你能預(yù)測輸出嗎？讓我們來分析一下。在上面的代碼中，首先記錄 Start 和 End，因為它們是同步操作?，F(xiàn)在接下來打印什么？您能猜到它是 setTimeout 代碼還是 Promise 代碼嗎？提示如下：微任務(wù)在宏任務(wù)之前執(zhí)行。

Promise 回調(diào)的優(yōu)先級更高，因為它被推送到 Microtask Queue（優(yōu)先級隊列），而 setTimeout 回調(diào)被推送到 Task Queue（宏任務(wù)隊列）。因此，事件循環(huán)在 Task Queue 之前處理 Microtask Queue。因此，將首先打印 Promise Resolved。一旦微任務(wù)隊列為空，事件循環(huán)就會處理任務(wù)隊列，打印 Timeout。