JavaScript 面試題

上一頁
下一頁

這些 JavaScript 面試題專門設計用於讓您熟悉面試中可能遇到的問題型別。這些問題是透過分析不同公司面試中最近提出的 JavaScript 問題而精心挑選的。

JavaScript 面試題集

在這裡，我們將精心挑選的問題分為以下三個不同的集合。

初級 JavaScript 面試題

無論您的經驗水平如何，這些問題都可能在面試開始時被問到。這些問題基於 JavaScript 的基礎知識。您可以通讀這些問題來測試您的基礎知識。

1. 什麼是 JavaScript？

答：JavaScript 是一種單執行緒程式語言，我們可以用它進行客戶端或伺服器端開發。它是一種動態型別程式語言，這意味著我們在編寫 JavaScript 程式碼時無需關心變數的資料型別。此外，它還包含控制語句、運算子和物件，例如 Array、Math、Data 等。

2. JavaScript 的優缺點是什麼？

答：每種語言都有其 優點和缺點，JavaScript 也不例外。

JavaScript 的優點
  • 減少伺服器互動：您可以在將頁面傳送到伺服器之前驗證使用者輸入。這節省了伺服器流量，這意味著伺服器負載更小。
  • 向訪客提供即時反饋：他們不必等待頁面重新載入才能檢視是否忘記輸入某些內容。
  • 增加互動性：您可以建立當用戶將滑鼠懸停在其上或透過鍵盤啟用它們時會做出反應的介面。
  • 更豐富的介面：您可以使用 JavaScript 包含拖放元件和滑塊等專案，為您的網站訪客提供豐富的介面。
JavaScript 的缺點

我們不能將 JavaScript 視為一門完整的程式語言。它缺少以下重要功能。

  • 客戶端 JavaScript 不允許讀取或寫入檔案。出於安全原因，這是被禁止的。
  • JavaScript 不能用於網路應用程式，因為沒有此類支援。
  • JavaScript 沒有多執行緒或多處理器功能。

3. JavaScript 是一種區分大小寫的語言嗎？

答：是的！JavaScript 是一種區分大小寫的語言。這意味著語言關鍵字、變數、函式名稱以及任何其他識別符號必須始終使用一致的大小寫字母。

4. JavaScript 中的變數命名約定是什麼？

答：在 JavaScript 中命名變數時，請記住以下規則。

  • 您不應該使用任何 JavaScript 保留關鍵字作為變數名。您可以檢視所有保留關鍵字。
  • JavaScript 變數名不能以數字 (0-9) 開頭。它們必須以字母或下劃線字元開頭。例如，123test 是一個無效的變數名，但 _123test 是一個有效的變數名。
  • JavaScript 變數名區分大小寫。例如，Name 和 name 是兩個不同的變數。

5. typeof 運算子如何工作？

答：typeof 是一個一元運算子，放置在其單個運算元之前，該運算元可以是任何型別。其值為一個字串，指示運算元的資料型別。

如果 typeof 運算子的運算元是數字、字串或布林值，則其結果為“number”、“string”或“boolean”，並根據評估結果返回 true 或 false。

6. 如何在 JavaScript 中建立陣列？

答：您可以使用陣列字面量定義陣列，如下所示

var x = [];
var y = [1, 2, 3, 4, 5];

7. 如何讀取 JavaScript 中陣列的元素？

答：陣列有一個 length 屬性，可用於迭代。我們可以按如下方式讀取陣列的元素。

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

要了解更多關於 JavaScript 陣列 的資訊，請檢視附加連結。

8. 如何在 JavaScript 中建立物件？

答：JavaScript 很好地支援物件概念。您可以使用物件字面量建立物件，如下所示。

var emp = {
   name: "Zara",
   age: 10
};

9. 如何讀取 JavaScript 中物件的屬性？

答：您可以使用點表示法編寫和讀取物件的屬性，如下所示。

// Getting object properties
emp.name            // ==> Zara
emp.age             // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

要了解更多關於 JavaScript 物件 的資訊，請檢視附加連結。

JavaScript 中有哪些不同的資料型別？

答：JavaScript 資料型別可以分為原始型別和非原始型別。

中級 JavaScript 面試題

1. JavaScript 中變數的有效作用域是什麼？

答：變數的作用域 是定義它的程式區域。JavaScript 變數 只有兩種作用域。

  • 全域性變數：全域性變數具有全域性作用域，這意味著它在您的 JavaScript 程式碼中的任何地方都可見。
  • 區域性變數：區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

2. 如果名稱相同，全域性變數和區域性變數中哪種型別的變數優先於其他變數？

答：區域性變數優先於具有相同名稱的全域性變數。

3. 什麼是 JavaScript 中的命名函式？如何定義命名函式？

答：命名函式在定義時具有名稱。可以使用 function 關鍵字定義命名函式，如下所示。

function named(){
   // do some stuff here
}

4. JavaScript 支援多少種類型的函式？

答：JavaScript 中的函式可以是命名函式或匿名函式。

要了解更多關於JavaScript 函式的資訊，請檢視附加連結。

5. 如何定義匿名函式？

答：匿名函式的定義方式與普通函式類似，但它沒有名稱。

// Named function
function namedFunction() {
    return "I have a name";
}

// Anonymous function
const anonymousFunction = function() {
    return "I don't have a name";
};

6. 您可以將匿名函式分配給變數嗎？

答：是的！匿名函式可以分配給變數。

7. JavaScript 中“this”運算子的用途是什麼？

答：JavaScript“this”關鍵字包含對物件的引用。它表示函式或當前程式碼的上下文。它用於訪問當前物件的屬性和方法。

8. JavaScript 中的 Date 物件是什麼？

答：Date 物件是 JavaScript 語言中內建的資料型別。使用 new Date() 建立 Date 物件。

建立 Date 物件後，許多方法允許您對其進行操作。大多數方法只需允許您使用本地時間或 UTC（通用時間或格林威治標準時間）獲取和設定物件的年份、月份、日期、小時、分鐘、秒和毫秒欄位。

9. JavaScript 中的 Number 物件是什麼？

答：JavaScript Number 物件表示數值資料，可以是整數或浮點數。通常，您無需擔心 Number 物件，因為瀏覽器會自動將數字字面量轉換為 Number 類的例項。

語法：建立 Number 物件

var val = new Number(number);

如果引數無法轉換為數字，則返回 NaN（非數字）。

10. 哪個內建方法反轉陣列元素的順序？

答：JavaScript reverse() 方法反轉陣列元素的順序 - 第一個變為最後一個，最後一個變為第一個。

11. 如何使用 JavaScript 重定向 URL？

答：在客戶端使用 JavaScript 重定向。可以使用以下方法將網站訪問者重定向到新頁面。

// Simulate a mouse click:
window.location.href = "https://tutorialspoint.tw/";

// Simulate an HTTP redirect:
window.location.replace("https://tutorialspoint.tw/");

12. 如何使用 JavaScript 列印網頁？

答：JavaScript 幫助您使用 window 物件的 print 函式實現此功能。當執行 JavaScript print 函式 window.print() 時，將列印當前網頁。

<html>
   <head>
      <title>Print Page</title>
      <script>
         function printpage() {
            window.print();
         }
      </script>
   </head>
   <body>
      <h2>This is a sample page to print</h2>
      <button onclick="printpage()">Print Page</button>
   </body>
</html>

13. null 值的 typeof 返回什麼？

答：它返回“object”。

14. 如何在 JavaScript 中動態建立新元素？

答：我們將有一個按鈕元素，點選它時，我們將生成一個新的“p”元素並將其附加到 DOM。

<body>
       <h3>How to dynamically create new elements in JavaScript?</h3>
       <div id="container">
       <!-- Newly created elements will be appended here -->
    </div>
    <button onclick="createNewElement()">Create Element</button>

    <script>
       function createNewElement() {
       // Create a new paragraph element
       var newParagraph = document.createElement('p');

       // Set the text content of the paragraph
       newParagraph.textContent = 'This is a dynamically created paragraph.';

       // Append the paragraph to the container div
       var container = document.getElementById('container');
       container.appendChild(newParagraph);
       }
    </script>
</body>

15. 什麼是函式提升？

答：JavaScript 中的函式提升是一種預設行為，其中函式宣告在程式碼執行之前被移動到其區域性作用域的頂部。

高階 JavaScript 面試題

1. 什麼是回撥？

答：回撥是作為引數或選項傳遞給某些方法的普通 JavaScript 函式。一些回撥只是事件，用於在觸發特定狀態時為使用者提供做出反應的機會。

2. 什麼是閉包？

答：閉包是在從某個內部作用域訪問當前作用域之外定義的變數時建立的。

<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function outer() {
         output.innerHTML += "The outer function is executed! <br>";
         function inner() {
            output.innerHTML += "The inner function is executed! <br>";
         }
         inner();
      }
      outer();
   </script>
</body>

3. JavaScript 中的 arguments 物件是什麼？

答：JavaScript 變數 arguments 表示傳遞給函式的引數。

4. 如何獲取傳遞給函式的引數型別？

答：使用 typeof 運算子，我們可以獲取傳遞給函式的引數型別。

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

5. 如何獲取傳遞給函式的引數總數？

答：使用 arguments.length 屬性，我們可以獲取傳遞給函式的引數總數。

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

6. 如何在函式內部獲取呼叫函式的引用？

答：arguments 物件有一個 callee 屬性，它引用您所在的函式。

function func() {
   return arguments.callee; 
}
func();

7. 您可以將匿名函式作為引數傳遞給另一個函式嗎？

答：是的！匿名函式可以作為引數傳遞給另一個函式。

8. 如何在 JavaScript 中處理異常？

答：最新版本的 JavaScript 添加了異常處理功能。JavaScript 實現 try...catch...finally 結構以及 throw 運算子來處理異常。

您可以捕獲程式設計師生成的異常和執行時異常，但您無法捕獲 JavaScript 語法錯誤。

9. JavaScript 中的 onError 事件處理程式的用途是什麼？

答：onError 事件處理程式是第一個促進 JavaScript 錯誤處理的功能。每當頁面上發生異常時，都會在 window 物件上觸發 error 事件。

onError 事件處理程式提供三條資訊來識別錯誤的確切性質。請檢視JavaScript - 錯誤和異常處理。

  • 錯誤訊息：瀏覽器為給定錯誤顯示的相同訊息。
  • URL：發生錯誤的檔案。
  • 行號：導致錯誤的給定 URL 中的行號。

10. 您可以使用 JavaScript 訪問 Cookie 嗎？

答：JavaScript 還可以使用 Document 物件的 cookie 屬性操作 Cookie。JavaScript 可以讀取、建立、修改和刪除應用於當前網頁的 Cookie 或 Cookie。

11. 如何使用 JavaScript 建立 Cookie？

答：建立 Cookie 的最簡單方法是將字串值分配給 document.cookie 物件。

document.cookie = "key1 = value1; key2 = value2; expires = date";

12. 如何使用 JavaScript 讀取 Cookie？

答：讀取 Cookie 與寫入 Cookie 一樣簡單，因為 document.cookie 物件的值就是 Cookie。因此，您可以隨時使用此字串來訪問 Cookie。

document.cookie 字串將保留以分號分隔的名稱=值對列表，其中名稱是 Cookie 的名稱，值是其字串值。

您可以使用字串的split() 函式將字串分解成鍵和值。

13. 如何使用 JavaScript 刪除 Cookie？

有時您可能希望刪除 Cookie，以便後續嘗試讀取 Cookie 返回空值。為此，您只需將過期日期設定為過去的時間即可。

要了解有關Cookie的所有資訊，請點選附加連結。

14. 輸出順序是什麼，為什麼？

console.log('1');

setTimeout(() => {
    console.log('2');
    Promise.resolve().then(() => {
        console.log('3');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('4');
    setTimeout(() => {
        console.log('5');
    }, 0);
});

console.log('6');

輸出：首先，同步程式碼執行列印 1 和 6，然後第一個 Promise 微任務排隊並列印 4。在 4 之後，一個新的 setTimeout 排隊，原始 setTimeout 執行並列印 2。第一個 setTimeout 中的 Promise 列印 3，最後，最後一個 setTimeout 執行並列印 5

1, 6, 4, 2, 3, 5

15. 修復提供的錯誤程式碼以列印 0,1,2,3,4

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

答：要修復提供的程式碼以列印 0,1,2,3,4。我們需要將 var 更改為 let，因為 var 具有函式作用域，而不是塊作用域。

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

瞭解面試動態

優秀的 interviewers 很少計劃在面試期間提出任何特定問題，通常問題從主題的一些基本概念開始，然後根據進一步的討論和您的回答繼續進行。因此，始終弄清楚您的基本原理，以給人留下良好的印象。
javascript_questions_answers.htm
列印頁面
上一頁
下一頁
廣告