JavaScript - void 关键字



JavaScript 中的 void 关键字用作计算给定表达式并返回 undefined 的运算符。void 是 JavaScript 中的一个重要关键字。void 的含义是 null 或 empty。

void 关键字可以用作一元运算符,它出现在其单个操作数之前,该操作数可以是任何类型。此运算符指定要计算的表达式,而不返回值或返回 undefined。

语法

在 JavaScript 中使用 void 关键字的语法 −


 void operand;

在上面的语法中,操作数可以是任何表达式。

返回值

它返回 undefined。

在下面的代码中,我们使用了带有 'void' 关键字的 10。在输出中,您可以观察到它返回 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>

void 关键字优先级的重要性

通常,JavaScript 的 'void' 关键字用于返回原始的 undefined 值,但如果你不优先考虑,它可能会返回不同的值。

让我们通过下面的示例来理解它。

在下面的代码中,void 运算符优先于第一个表达式中的 strict equality 运算符。因此,它首先将 '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)'。

在下面的代码中,当您单击锚文本时,它会更改正文的背景颜色,而不是导航到另一个网页。


<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' 关键字与 arrow 函数一起使用,以从 arrow 函数返回 undefined。JavaScript:void() URI 还可用于默认阻止网页重新加载,例如 preventDefault() 方法。