当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptvoid用法及实战技巧

JavaScriptvoid用法及实战技巧

2025-07-12 23:10:23 0浏览收藏

本篇文章给大家分享《JavaScript的void操作符用于计算表达式，但不返回结果。它通常用于防止浏览器执行默认操作，例如在超链接中使用`javascript:void(0)`来阻止页面跳转。使用方法是在表达式前加上`void`关键字，如`void 0`或`void (expression)`。》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

JavaScript的void操作符用于执行表达式并返回undefined。其核心作用是确保表达式结果为undefined，常见于早期阻止链接跳转的场景，如href="javascript:void(0);"，但现代开发中已较少使用。1. void(expression)会执行表达式但返回undefined；2. 适用于需要明确结果为undefined的场景，如IIFE中忽略返回值；3. 不推荐在标签中使用，因其存在可维护性、可访问性和行为耦合问题；4. 现代替代方案是使用event.preventDefault()分离HTML与JavaScript逻辑，提高可维护性和可访问性。

JavaScript的 void 操作符是一个很有趣，甚至可以说有点“古老”的存在。简单来说，它会执行你给它的表达式，然后返回 undefined。它的主要作用，或者说最常见的场景，就是确保某个表达式的结果是 undefined，尤其是在你希望避免默认行为的时候。

解决方案

要理解 void 的用法，最直观的方式就是看它如何处理表达式。它的语法很简单：void expression。

最经典的用法，也是很多前端开发者第一次接触 void 的地方，就是在标签的 href 属性里：

<a href="javascript:void(0);">点击这里什么也不发生</a>

这里 void(0) 的作用是，当用户点击这个链接时，JavaScript 会执行 0 这个表达式（它没有任何副作用），然后 void 操作符会返回 undefined。由于 undefined 不会导致浏览器导航到新的页面，所以点击链接后，页面会停留在原地。这在很多早期或者需要通过 JavaScript 动态处理链接行为的场景下非常常见。

当然，你也可以用 void 来处理任何表达式：

let result = void (1 + 2); // result 会是 undefined
console.log(result); // 输出: undefined

// 尽管表达式是 `alert('Hello');`，void 依然会返回 undefined
let funcResult = void alert('Hello');
console.log(funcResult); // 输出: undefined (在 alert 弹窗关闭后)

这里的核心在于，void 总是返回 undefined，而它后面的表达式会被求值，但其结果会被丢弃。这在某些特定场景下，比如你明确需要一个表达式的结果是 undefined，或者为了防止某些副作用（比如在标签里阻止导航），就派上用场了。

`void(0)` 和 `void(expression)` 有什么区别？

说实话，从 void 操作符本身的机制来看，void(0) 和 void(expression) 在功能上并没有本质区别。void 操作符的唯一任务就是对紧随其后的表达式进行求值，然后，无论这个表达式的值是什么，它都会返回 undefined。所以，void(0) 只是 void 操作符的一个具体应用，其中 expression 被指定为数字 0。

为什么是 0 呢？因为 0 是一个简单的、没有副作用的表达式，它的求值成本极低，而且不会引起任何不必要的行为。你可以写 void(1)，void('hello')，甚至 void(console.log('hi'))，它们都会让 void 操作符返回 undefined。唯一的不同在于，void 会先执行括号里的表达式，如果这个表达式有副作用（比如 console.log），那么副作用会发生。

所以，区别不在于 void 本身的行为，而在于你选择的 expression 是否有副作用，或者你是否需要这个表达式被求值。在 href="javascript:void(0);" 的场景下，选择 0 是因为它最简洁、最无害，仅仅是为了触发 void 返回 undefined 的行为，从而阻止链接的默认跳转。

`void` 操作符在现代JavaScript中还有哪些实际用途？

坦白讲，在现代 JavaScript 开发中，void 操作符的直接使用场景已经大大减少了。很多它曾经解决的问题，现在都有了更优雅、更语义化的替代方案。

不过，它并非完全没有用武之地。有时候你会看到它出现在一些立即执行函数表达式（IIFE）的写法中：

// 这种写法确保整个表达式的结果是 undefined，即使 IIFE 内部有返回值
(function() {
    console.log('Hello from IIFE');
    return 123; // 这个返回值会被 void 丢弃
})(); // 这里的返回值是 123

void function() {
    console.log('Hello from void IIFE');
    return 123;
}(); // 这里的返回值是 undefined

在某些压缩代码或确保特定表达式求值为 undefined 的场景下，void 可能会被用到。例如，在某些模块化规范或特定库的设计中，为了确保一个表达式不会意外地返回一个非 undefined 的值，从而影响后续的逻辑或链式调用，void 可能会被作为一种防御性编程的手段。

但总的来说，随着 JavaScript 语言的发展和社区最佳实践的演变，我们更倾向于使用那些意图更明确、可读性更高的语法。void 更多地成了一种历史遗留和特定场景下的“奇技淫巧”。了解它很重要，因为它确实存在于代码库中，但主动去使用它，通常需要一个非常充分且难以替代的理由。

为什么不推荐在标签中使用 `javascript:void(0)`？有什么更好的替代方案？

这是一个非常好的问题，也是现代前端开发中一个重要的共识。尽管 javascript:void(0) 曾是阻止链接跳转的常见做法，但在现代 Web 开发中，它通常不被推荐。

不推荐的原因主要有几点：

混合内容与行为： href="javascript:..." 这种写法将 HTML（内容）和 JavaScript（行为）紧密耦合在一起。这违反了结构、样式、行为分离的原则，使得代码难以维护和理解。当你需要修改链接的行为时，你不得不去修改 HTML 结构，而不是在 JavaScript 文件中集中处理。
可访问性问题： 对于依赖键盘导航或屏幕阅读器的用户来说，标签通常意味着一个可点击并会导航的元素。使用 void(0) 可能会导致用户体验上的困惑，因为它看起来像链接，但点击后却没有任何视觉反馈或导航行为，这可能让辅助技术用户感到沮丧。
不利于事件委托和性能优化： 当你有大量类似的链接需要阻止跳转时，为每个链接添加 onclick="javascript:void(0);" 会导致大量的重复代码。更好的做法是使用事件委托，将事件监听器添加到父元素上，然后统一处理子元素的点击事件，这样可以提高性能和代码的简洁性。

那么，更好的替代方案是什么呢？

<!-- HTML 结构保持干净，不包含 JS 逻辑 -->
<a href="#" id="myLink">点击这里阻止默认跳转</a>
<button id="myButton">点击我，我也不会提交表单</button>

<form id="myForm">
    <input type="text" name="name">
    <button type="submit">提交表单</button>
</form>

// JavaScript 文件中处理行为
document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认跳转行为
    console.log('链接被点击了，但没有跳转！');
    // 在这里执行你希望的 JavaScript 逻辑
});

document.getElementById('myButton').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止按钮的默认行为（例如表单提交）
    console.log('按钮被点击了，但没有默认行为！');
});

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    console.log('表单被提交了，但没有刷新页面！');
    // 在这里处理表单数据，例如通过 AJAX 提交
});

这种方式的优点显而易见：