資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在JavaScript中使用void關鍵字？
在本教程中，讓我們討論如何在JavaScript中使用void關鍵字。
我們使用void關鍵字作為不返回值的函式的返回型別。它計算表示式並返回undefined。因為這是一個一元運算子，所以我們可以將其與單個運算元一起使用。
我們不應該將表示式括在括號中，因為void不是函式。void 0與void(0)相同。
使用者可以遵循語法塊來處理每個用例。
語法
void expression
表示式可以是變數或函式。
將void關鍵字與立即呼叫函式表示式一起使用
立即呼叫函式表示式(IIFE)允許void關鍵字作為表示式而不是宣告來工作。
例如，我們需要執行以下程式碼片段。
function execute(){}()
語法
void (function execute() {})();
(function execute() {})();
我們可以用兩種方法編寫第一個程式碼片段，如上所示，使用void。
示例
在這個程式中，我們在IIFE函式中添加了一個void。因此，函式返回undefined。
<html> <body> <h2>Program:<i>IIFE with void</i></h2> <div id="IIFEVoidBtnWrap"> <button onclick="IIFEVoidOutput()">Click Me</button> </div> <p id="IIFEVoidOut"></p> <script> function IIFEVoidOutput() { var IIFEVoidBtnWrap = document.getElementById("IIFEVoidBtnWrap"); var IIFEVoidOut = document.getElementById("IIFEVoidOut"); IIFEVoidBtnWrap.style.display = "none"; const IIFEFunction = void function IIFEFunction1() { return 'IIFEFunction1'; }(); IIFEVoidOut.innerHTML = "<b>Output</b> : " + IIFEFunction; } </script> </body> </html>
將void關鍵字與URI一起使用
當我們將void關鍵字與URI一起使用時，瀏覽器會評估URI程式碼並將值返回到頁面。
當用戶點選連結時，超連結會透過重新載入頁面來開啟。在這種情況下，如果需要執行其他程式碼，可以使用javascript: void(0)。
語法
javascript:void 0
它什麼也不返回。
示例
在這個程式中，當用戶點選第一個連結時，第一個連結會重新載入頁面。第二個連結保持不變，因為void 0限制了頁面重新載入。
<html> <body> <h2>Program:<i>javascript: void(0)</i></h2> <a href=""ondblclick="alert('Twice')">Page reload</a><br><br> <a href="javascript: void(0)" ondblclick="alert('Twice')">No page reload</a> </body> </html>
將void關鍵字與條件語句一起使用
語法
if(value===void(0)) {}
Void可以將未定義的變數或資料與未定義的資料進行比較。
示例
在這個程式中，第一個函式呼叫沒有引數。因此，它使用void進行條件檢查顯示undefined。第二個函式呼叫有值，因此使用者可以在輸出中看到該值。
<html> <body> <h2>Program: <i>conditions with void</i></h2> <div id="checkVoidBtnWrap"> <button onclick="checkVoidOutput()">Click Me</button> </div> <p id="checkVoidOut"></p> <script> function checkVoidOutput() { var checkVoidBtnWrap = document.getElementById("checkVoidBtnWrap"); var checkVoidOut = document.getElementById("checkVoidOut"); //checkVoidBtnWrap.style.display = "none"; var checkVoidCbk = function(value) { if(value===void(0)) return "Nothing"; else return value; }; checkVoidOut.innerHTML = "<b>Output</b><br><br> " + checkVoidCbk() + "<br><br>"+ checkVoidCbk("Hello"); } </script> </body> </html>
將void關鍵字與非洩漏箭頭函式一起使用
箭頭函式返回一個表示式。在某些情況下，它會返回不返回任何內容的函式呼叫的意外結果。在這種情況下，void可以提供幫助，因為它不返回任何內容。
語法
button.onclick = () => void doAction();
即使出現意外結果，它也不會返回任何內容。
示例
在這個程式中，我們使用void鍵設定箭頭函式，以避免可能發生的任何錯誤操作。
<html> <body> <h2>Program: <i>arrow function with void</i></h2> <div id="arrowVoidBtnWrap"> <button id="arrowVoidBtn">Click Me</button> </div> <p id="arrowVoidOut"></p> <script> var arrowVoidBtnWrap = document.getElementById("arrowVoidBtnWrap"); var arrowVoidBtn = document.getElementById("arrowVoidBtn"); var arrowVoidOut = document.getElementById("arrowVoidOut"); function arrowVoidOutput() { arrowVoidOut.innerHTML = "Returns Nothing"; } arrowVoidBtn.onclick = () => void arrowVoidOutput(); </script> </body> </html>
將void關鍵字與非同步呼叫一起使用
語法
(async () => {
try {
const resp = await fetch('API');
const res = await response.result();
}
catch(e) {}
})();
在非同步API呼叫的情況下，Void可以提供幫助。
示例
此程式使用非同步函式的無效語法並顯示結果。
<html> <body> <h2>Program: <i>asynchronus calls with void</i></h2> <div id="asyncVoidBtnWrap"> <button id="asyncVoidBtn" onclick="asyncVoidDoAction()">Click Me</button> </div> <p id="asyncVoidOut"></p> <script> var asyncVoidBtnWrap = document.getElementById("asyncVoidBtnWrap"); var asyncVoidOut = document.getElementById("asyncVoidOut"); function asyncVoidDoAction() { (async () => { try { const resp = await fetch('API'); const res = await response.result(); asyncVoidOut.innerHTML = res; } catch(e) { asyncVoidOut.innerHTML = e; } })(); } </script> </body> </html>
使用void關鍵字生成未定義的值
語法
void(variable=value)
它返回undefined。
示例
在這個程式中，我們使用void關鍵字返回undefined值，並將實際值和undefined值都顯示給使用者。
<html> <body> <h2>Program: <i>undefined value with void</i></h2> <div id="undefValVoidBtnWrap"> <button id="undefValVoidBtn">Click Me</button> </div> <p id="undefValVoidOut"></p> <script> var undefValVoidBtnWrap = document.getElementById("undefValVoidBtnWrap"); var undefValVoidBtn = document.getElementById("undefValVoidBtn"); var undefValVoidOut = document.getElementById("undefValVoidOut"); undefValVoidBtn.onclick = function() { var num1, num2, num3, num4; num1=10, num2=void (num3=30, num4=40); undefValVoidOut.innerHTML = ('num1 = ' + num1 + '<br><br>num2 = ' + num2 + '<br><br>num3 = ' + num3 + '<br><br>num4 = ' + num4); }; </script> </body> </html>
使用void關鍵字生成一次性函式
語法
void function doAction()
{}();
try{
doAction();}
catch(e)
{}
Void使函式第二次變為未定義。
示例
在這個程式中，我們使用void關鍵字定義一個函式。當我們第二次呼叫它時，函式呼叫會丟擲錯誤。try-catch塊處理錯誤情況。
<html> <body> <h2>Program: <i> one-time function with void</i></h2> <div id="oneTimeFnVoidBtnWrap"> <button id="oneTimeFnVoidBtn">Click Me</button> </div> <p id="oneTimeFnVoidOut"></p> <script> var oneTimeFnVoidBtnWrap = document.getElementById("oneTimeFnVoidBtnWrap"); var oneTimeFnVoidBtn = document.getElementById("oneTimeFnVoidBtn"); var oneTimeFnVoidOut = document.getElementById("oneTimeFnVoidOut"); var oneTimeFnStr = ""; oneTimeFnVoidBtn.onclick = function() { void function oneTimeFnVoid() { oneTimeFnStr += "One-time function<br><br>"; }(); try { oneTimeFnVoid(); } catch(e) { oneTimeFnStr += e; } oneTimeFnVoidOut.innerHTML = oneTimeFnStr; }; </script> </body> </html>
用例
void console.log("test"); //test void("test"); //undefined (void(2 =="2")); //undefined (void(2)=="2"); //false (void(2)==undefined);// true
運算子優先順序
如果有多個運算元，我們應該使用括號。
void 10+20;//void(10)+20
缺點
void是一個關鍵字。我們不能將其用作變數名。因此，我們無法更改其定義。
eval('const void=100');
//Uncaught SyntaxError: Unexpected token 'void'
本教程向我們講解了void關鍵字的用法。它只是有助於最小化程式碼，但會影響程式碼的可讀性。
更新於：2022年10月31日
213 次瀏覽
廣告