JavaScript - void 關鍵字

JavaScript 中的void關鍵字用作一個運算子，它評估給定的表示式並返回undefined。void是 JavaScript 中一個重要的關鍵字。void 的含義是空或無效。

void關鍵字可以用作一元運算子，它出現在其唯一運算元之前，該運算元可以是任何型別。此運算子指定要評估的表示式，但不返回值或返回 undefined。

語法

在 JavaScript 中使用 void 關鍵字的語法：

void operand;

在上述語法中，運算元可以是任何表示式。

返回值

它返回 undefined。

示例

在下面的程式碼中，我們使用了 10 和 'void' 關鍵字。在輸出中，您可以觀察到它返回 undefined。

<html>
<body>
   <div id = "output">The value of the ans variable is:  </div>
   <script>
      let ans = void 10;
      document.getElementById("output").innerHTML += ans;
   </script>
</body>
</html>

輸出

The value of the ans variable is: undefined

void 關鍵字優先順序的重要性

通常，JavaScript 'void' 關鍵字用於返回原始的 undefined 值，但如果您不考慮優先順序，它可能會返回不同的值。

讓我們透過下面的示例來理解它。

示例

在下面的程式碼中，void 運算子優先於第一個表示式中的嚴格相等運算子。因此，它首先將 'void 10' 評估為 undefined 並將其與 20 進行比較。因此，它返回 false。

第二個表示式首先將 '10 === 20' 評估為 false，然後將 'void false' 評估為 undefined。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      let res1 = void 10 === 20;
      let res2 = void (10 === 20);
      document.getElementById("output1").innerHTML += res1;
      document.getElementById("output2").innerHTML += res2; 
   </script>
</body>
</html>

輸出

false
undefined

什麼是 javascript:void(0)?

讓我們將 javascript:void(0) 分成兩部分，分別理解。

javascript

您可以使用 'javascript:' 建立偽 URL。使用 'javascript:'，您可以建立互動式 URL。

您需要在 'javascript:' 後編寫表示式，當用戶點選錨文字時，它會執行 JavaScript 程式碼。

讓我們透過下面的示例來理解它。

示例

在下面的程式碼中，我們建立了連結文字並使用 JavaScript URL 作為 href。當您點選錨文字時，它會在 HTML 文件中寫入它。

<html>
   <body>
      <a href = "javascript:document.write('Anchor text is clicked!')"> Click me! </a>
   </body>
</html>

透過這種方式，您可以使用 'javascript:uri' 建立偽 URL。

void(0)

void(0) 會評估 JavaScript 表示式，但它會返回 undefined。因此，當您想在不執行任何操作的情況下執行表示式時，可以使用 void(0)。

javascript: void(0)

當您不希望使用者在點選連結時導航到另一個網頁時，可以使用 'javascript:void(0)' 作為錨標記的 href 值。

讓我們透過下面的示例來理解它。

示例

無論何時您點選下面的程式碼中的錨文字，它都不會執行任何操作。

<html>
   <body>
      <a href = "javascript:void(0)"> Click me! </a>
   </body>
</html>

當您想使用 URI 更新網頁但不想導航到另一個網頁時，也可以使用 'javascript:void(0)'。

示例

在下面的程式碼中，當您點選錨文字時，它將更改 body 的背景顏色，而不是導航到另一個網頁。

<html>
<body>
   <a href = "javascript:void(0);" 
   	  onclick = "document.body.style.backgroundColor = 'blue'"> 
   	  Change Background Color 
   </a>
</body>
</html>

void 關鍵字與函式一起使用

當您將 void 關鍵字與 JavaScript 函式一起使用時，它會返回 undefined。之後，如果您嘗試執行該函式，它將丟擲錯誤，因為 'void' 運算子將該函式視為其運算元並將其評估為 undefined。

示例

在下面的程式碼中，我們定義了 test() 函式並與它一起使用了 'void' 關鍵字。

此外，還使用了 try…catch 塊來捕獲錯誤。

在 try 塊中，我們執行該函式，在輸出中，您可以觀察到控制權進入了 catch 塊。

<html>
<body>
<div id = "demo"> </div>
<script>
   const output = document.getElementById('demo');
   try {
      void function test() {
         output.innerHTML += "The test function is executed!";
      }
      test();
   } catch (error) {
      output.innerHTML += "The test function is undefined!";
   }
</script>
</body>
</html>

輸出

The test function is undefined!

void 關鍵字與立即執行函式一起使用

當您將 'void' 關鍵字與 JavaScript 立即執行函式一起使用時，它首先呼叫函式表示式並將其評估為 undefined。

示例

在下面的程式碼中，我們使用 void 關鍵字定義了立即執行函式。您可以觀察到它首先呼叫函式並返回 undefined。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      void function () {
         output.innerHTML = "Unknown function is executed!";
      }();
   </script>
</body>
</html>

輸出

Unknown function is executed!

此外，您還可以將 'void' 關鍵字與箭頭函式一起使用，以從箭頭函式返回 undefined。JavaScript:void() URI 也可以用於防止網頁預設重新載入，例如 preventDefault() 方法。

列印頁面