我從事 JavaScript 面試已經有一段時間了，我遇到過很多人，盡管知道自己要參加 JavaScript 面試，但他們要么不熟悉 JavaScript，要么沒有做好充分的準備。

盡管從事過基于 JavaScript 的項目，但其中一些人甚至無法回答最基本的 JavaScript 問題。因此，本文的目的是分享在JavaScript 面試中會遇到哪些問題以及如何回答這些問題。

這些不是我在采訪中提出的確切問題，但它們確實涵蓋了概念。讓我們從一些基本問題開始，然后逐步討論更高級的概念。

1. var、let 和 const 之間的區別？

盡管這是 JS 的基本問題之一，但令人驚訝的是，許多人都無法區分 let 和 var 之間的區別。

答案很簡單：var 是函數作用域，可以重新聲明和更新，而 let 是塊作用域，不能重新聲明，但可以更新。同時，const 是塊作用域的，不能重新聲明或更新。

var a = 10 // Can re-declared and update
let b = 20 // Can't re-declared but can update
const c = 30 // Can't re-declared or update

當然，var 如今已經不太常用了，但是仍然有代碼使用它，我們可能會遇到。未能回答此問題還表明你不熟悉 JavaScript 中塊作用域和函數作用域之間的區別。

2. == 和 === 運算符的區別？

這也是一個很常見的JS問題。== 運算符僅檢查值是否匹配，而忽略數據類型。如果要比較的兩個變量的類型不同，它會在后臺執行類型強制。另一方面， === 運算符確保值和類型相等。

2 == "2" //true
2 === "2" //false
null == undefined //true
null === undefined //false

3. 如何在不改變原始數組的情況下對數組進行排序？

在 2023 年之前，要對數組進行排序而不改變它，你需要對其進行淺表復制，因為 JS 排序函數會改變原始數組。

因此，最簡單的方法是使用擴展運算符，然后對數組進行排序，如下例所示。

const numbers = [3, 1, 4, 1, 5];
const sorted = [...numbers].sort();

然而，在 2023 年，JS 引入了 toSorted() 函數，它允許您在不改變原始數組的情況下對數組進行排序。這個問題測試候選人的知識以及是否是最新的。

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.toSorted();

4. 解釋回調函數并提供用例？

簡而言之，回調是一個函數，它作為參數傳遞給另一個函數，然后在后者完成其任務后執行。它支持異步操作，允許 JavaScript 處理耗時的任務，而不會延遲其他操作的執行。

const fetchData = (callbackFunc) => {
    setTimeout(() => {
      const data = "Sample data";
      callbackFunc(data);
   }, 2000);
}


const processFetchedData = (data) => {
    console.log("Processing data:", data);
}


fetchData(processFetchedData);

回調用于處理用戶事件，例如按鈕單擊和輸入更改。當用戶事件發生時，可以調用回調函數來執行一段代碼。回調對于處理異步數據請求也非常有用。當從服務器獲取數據時，回調函數處理接收到的數據。

5. JavaScript 中的閉包是什么？

閉包是一個可以訪問其自身作用域、外部函數作用域和全局作用域的函數。閉包還與 JavaScript 中的詞法作用域相關。詞法作用域描述了變量和函數在運行時如何確定作用域。為了解釋什么是閉包，最好用一個簡單的例子。

let makeSizer = (size) => 
  () => {
    console.log(`fontSize = ${size}px`);
  };


const size10 = makeSizer(10);
const size12 = makeSizer(12);
const size14 = makeSizer(14);


size10(); // fontSize = 10px
size12(); // fontSize = 12px
size14(); // fontSize = 14px

在前面的示例中，size10、size12 和 size14 函數是閉包。閉包在事件驅動編程中很有用。例如，你可以編寫一個生成事件處理程序的函數，每個處理程序都可以訪問特定數據，而不會污染全局范圍。

6.什么時候需要使用Async代碼？

當我們需要避免 JavaScript 中阻塞主線程時，我們必須使用異步代碼。主線程管理調用堆棧，其中包含當前的函數調用序列。如果主線程被阻塞，函數在調用之前將必須等待。

因此，異步代碼對于高效處理耗時操作至關重要。JavaScript 提供了回調、promise 和 async/await 等技術來更好地管理異步操作。

7. JavaScript 中的 Promise 是什么？

Promise 是代表異步操作最終成功或失敗的對象。它們是與 ES6 JavaScript 添加一起引入的。當 Promise 被解決或拒絕時，您可以使用 Promise 實例的 then 和 catch 方法來調用函數。以下是 Promise 的簡單 JavaScript 代碼示例。

const fetchData = () => {
 return new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    setTimeout(() => {
      // Resolve the promise with some data
      resolve("Data fetched successfully!");
    }, 1000);
 });
};


// Use the Promise
fetchData()
 .then(data => {
    console.log(data);
 })
 .catch(error => {
    console.error("An error occurred:", error);
 });

8. Promise 和 Observables 之間的區別？

這是一個比前面的問題更高級的問題。Observables 是 Promise 的更強大版本，但它們不是 Javascript 原生的。它們用于處理產生多個值的操作，例如，用戶輸入事件或實時數據流。

與 Promises 不同，Observables 允許你通過調用 unsubscribe() 方法來取消正在進行的操作。Observables 也比 Promises 更適合復雜的數據操作，因為它們支持更廣泛的運算符（例如 map、filter、switchMap 等）。

然而，Observables 要求應用程序包含 RxJS 依賴開銷。此外，Observables 比 Promise 更難使用。因此，如果需要一種簡單的方法來處理異步操作的單個結果，Promise 更適合。

9. Promise 和 Async Await 之間的區別？

Async/Await 具有比 Promises 更同步的語法，使閱讀和理解程序的流程變得更容易。與 Promise 鏈相比，Async/Await 的樣板代碼更少。鏈接是連續執行兩個或多個異步操作，每個后續操作在前一個操作成功完成后開始。

const fetchData = async () => {
 // Simulate an API call that returns a promise
 let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched!"), 1000);
 });


 let result = await promise;
 console.log(result);
}


fetchData().catch(error => {
    console.error("An error occurred:", error);
});

上面是 async/await 在 JavaScript 中如何工作的示例。wait 關鍵字指示 JavaScript 等待，直到 Promise 對象被解析或拒絕。

Async/Await 基于 Promises，并作為對開發人員更友好的語法在 Promises 之后添加到 JavaScript 中。

但是，在必須并發處理多個異步操作的場景中，應該使用 Promises 而不是 async/await。Promise.all() 方法在這種情況下會很有用。

10. 解釋一下去抖動和節流？

去抖動意味著延遲函數的執行，直到自上次觸發事件以來經過一定時間。另一方面，節流限制了調用函數的頻率。它確保函數以指定的時間間隔執行，并且該時間間隔內的任何其他調用都將被忽略。

用例

去抖動最常見的應用之一是搜索建議，您希望等待用戶完成輸入后再獲取建議。這避免了每次擊鍵時都調用 API 并提高了性能。

限制對于處理滾動和調整大小事件非常有用，可以在這些事件中限制函數調用的頻率，以便應用程序不會因重新渲染而過載。

11. 什么是 JavaScript 中的事件冒泡以及如何阻止它？

當你單擊嵌套在其他幾個元素中的按鈕時，該按鈕及其父元素都會觸發單擊事件，從而在 DOM 樹中向上移動。這稱為事件冒泡，DOM 中的大多數事件都會發生這種情況。如果組件具有嵌套的單擊事件，這可能會成為問題。

要停止事件冒泡，可以使用事件對象的 stopPropagation() 方法。此方法可防止事件在 DOM 樹上進一步傳播。

onClick((event) => {
  event.stopPropagation();
  console.log("button clicked");
})

總結

以上這11道面試題中有基本和高級 JavaScript 問題與概念。作為面試官，我試圖使這些信息盡可能簡單，以便即使是初學者也能理解。

我希望今天分享的這期內容能夠幫助你自信地面對下一次 JavaScript 面試。最后，感謝您的閱讀，祝編程愉快。