数据结构
网络
关系型数据库管理系统
操作系统
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) {}
})();
Void 可以帮助处理异步 API 调用。
示例
此程序使用异步函数的无效语法并显示结果。
<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 使函数第二次变为 undefined。
示例
在此程序中，我们使用 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 次查看
广告