数据结构
网络
关系数据库管理系统(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 次浏览
广告