JavaScript 是一种脚本语言，可用于前端和后端开发。 使用这种编程语言，您可以创建动态更新的内容、动画图像和控制多媒体。
JavaScript 拥有数百个框架和库，也是最常用的编程语言， 根据 Statista。
JavaScript 创建了各种运算符来实现不同的角色。 在本文中，我将解释 JavaScript Void (0) 是什么、它的重要性、它的用例和优点、潜在的安全风险及其替代方案。
目录
什么是 Void(0) 运算符？
在我们的字典中，void 的意思是“无效”或“完全为空”。 void (0) 是检查给定值并返回未定义的运算符。 如果函数不返回任何内容，则该函数被视为无效。 void (0) 运算符可用于许多领域。
例如，当您单击锚标记时，您可以让 JavaScript 返回未定义。 当发生这种情况时，意味着您正在单击的页面将不会刷新，并且该页面不会发生任何变化。
使用 Void 运算符和 0 作为操作数的重要性
您可以将 void 运算符与任何表达式一起使用。 然而，在 JavaScript 中，它大多以 0 作为操作数来使用。 以下是 Void (0) 运算符的一些用例：
阻止导航
在正常情况下，如果您单击链接，它可能会将您带到一个新页面。 我们可以创建一个项目来演示它是如何工作的。 我的项目中有两个文件：index.html 和 nextPage.html。
您可以将此代码添加到不同的文件中，如下所示：
索引.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a> <script src="script.js"></script> </body> </html> nextPage.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Next Page</title> </head> <body> <h1>You are on the Next Page</h1> <a href="index.html">Go back to Home Page (No void operator)</a> <script src="script.js"></script> </body> </html>
看看这个视频：
如您所见，您可以通过单击按钮从“首页”导航到“下一页”。
我们现在可以引入阻止导航的 void (0) 运算符。 将此代码添加到index.html：
<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script>
当我们点击“Click me”按钮时，请观看此视频：
您可以看到，单击按钮后，出现此警报“按钮已单击，但没有导航！” 出现，但我们不导航到下一页。
自执行匿名函数
自执行匿名函数或立即调用函数表达式 (IIFE) 是在创建后定义并执行的函数。 此类函数旨在为变量创建私有作用域，以防止这些函数污染全局作用域。
看一下这段代码：
void function() {
// Function to calculate the sum of numbers from 1 to n
const calculateSum = () => {
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
return sum;
};
// Call the function and log the result to the console
const result = calculateSum();
console.log("The sum of numbers from 1 to 10 is:", result);
}();
这是一个自执行函数，它将 1-10 中的所有数字相加，并在代码执行后显示结果。
运行代码时，输出将是：“The sum ofnumbers from 1 to 10 is: 55”。
如何结合 JavaScript 和 Void 0
void 运算符并非 JavaScript 所独有，它在其他编程语言（如 C 和 C++）中也可用。 但是，该运算符的用法因一种语言而异。 例如，void 是 C 和 C++ 编程语言中的数据类型，而不是运算符。
JavaScript 使用带有数字零的关键字“void”。 您可以使用 void () 运算符来阻止默认行为，例如浏览器导航到下一个 URL。 这是将 JavaScript 与 void () 运算符相结合的代码块的完美示例。
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
您还可以使用 void () 运算符来获取未定义的原始值。 看一下这个代码块：
const result = void(0);const result = void(0);
当你运行它时，你会得到未定义的结果。
什么是无效 (0) 福利？
在 JavaScript 中，我们使用 void () 运算符来创建“void”或“未定义”值。 以下是在代码中使用此运算符的一些好处：
- 阻止导航：如果我们想阻止浏览器在单击链接或按钮时导航到新页面，可以在 href 属性中使用 void(0) 运算符。 此代码块说明了其工作原理：
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- 从函数返回未定义的值：作为开发人员，当您希望应用程序中的代码一致性时，可以使用 void () 运算符显式返回未定义。 查看这个代码块：
function myFunction() {
// do something
return void(0);
}
- 避免“未定义”赋值：您可以以“未定义”相当于“结果”的方式使用 void ()。 您也可以将其用作风格选择。 此代码块展示了如何实现此目的：
let result = void(0);
- 使代码更具可读性：代码可读性不是我们应该忽视的事情，尤其是在处理大型应用程序时。 当您想要显式丢弃返回值并让其他开发人员知道该函数不会返回任何内容时，可以使用 void()。 此代码块展示了如何实现此目的：
function myFunction() {
// Do something...
return void(0);
}
Void潜在的安全风险 (0)
尽管 void (0) 在 JavaScript 中的各种情况下都很有用，但如果使用不当，它也可能会变得危险。 以下是 void (0) 可能被恶意使用的一些情况：
- 脚本注入漏洞：如果传递给 void () 运算符的值未经清理和验证，则存在脚本注入攻击的潜在风险。 一个很好的例子是该值是根据用户输入动态生成的。
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
这样的代码块允许用户注入恶意代码。
- 点击劫持：攻击者可以使用 void 运算符在网页上创建透明/不可见层。 然后，此类攻击者将使用这些层来诱骗用户单击恶意链接和按钮。
- 可用于绕过内容安全策略 (CSP)：大多数网站所有者使用 CSP 来防止跨站点脚本 (XSS) 攻击。 您可以使用 CSP 来限制网页应加载的脚本和资源的性质。 但是，使用 void () 运算符可能会与此类措施发生冲突，因为它甚至会加载内容安全策略不允许的脚本。
无效的替代方案 (0)
技术不断变化，编程也是如此。 有些人认为 void (0) 是一个过时的运算符。 以下是现代开发人员使用的一些替代方案：
- 使用 event.preventDefault()：您可以使用 event.preventDefault() 来阻止事件操作的发生。 此类声明可以阻止用户提交表单或导航到下一页。
这些代码片段展示了如何使用 event.preventDefault：
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- 使用 # 作为 href 值：应用程序中的不同页面相互链接，以便于导航。 使用 # 作为 href 可确保用户保持在同一页面上。 您可以将此方法与 event.prevetDefault() 结合使用，以防止网页滚动到顶部。 您可以通过以下方式实现这一目标：
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- 使用 null：可以返回 null 值而不是未定义。 您可以通过以下方式实现这一目标：
let result = null;
常见问题解答
什么是 JavaScript？
JavaScript 是一种主要用于前端开发的编程语言。 然而，这种语言正在使用 Node.js 等框架进行后端开发。 JavaScript 主要与 CSS 和 HTML 等其他前端技术一起使用，以增加网页的交互性。
什么是 JavaScript Void 0？
JavaScript Void 0 是一个运算符，用于防止发生默认操作。 例如，您可以使用 void (0) 来阻止用户单击链接或按钮时进行导航。 单击带有 void (0) 的代码中的链接时，浏览器会尝试导航，但结果评估为未定义。
有没有 void (0) 的替代方案？
是的。 大多数现代开发人员在代码中使用事件侦听器而不是 void (0)。 这种方法可以轻松处理各种函数并防止源代码中的默认行为。
使用 void(0) 安全吗？
您可以使用 void (0) 来防止默认行为并使用自执行函数。 但是，如果您没有在代码中有意识地使用 void (0)，它可能会很危险。 例如，如果将此类运算符应用于用户输入，则可以轻松注入恶意代码。
结论
JavaScript 是一种非常广泛的编程语言，您可能需要一些时间才能掌握其大部分概念。
我们已经讲授了 void (0) 运算符的重要性、用例及其替代方案。 您现在还了解了如何将 JavaScript 与 void(0) 结合起来以及使用此运算符时可能遇到的潜在风险。
您还可以探索一些最佳的 JavaScript 运行时环境，以更好地执行代码。
