JavaScript中void关键字的含义与用法详解

作者：青柠时间：2026-10-24 20:54:48浏览：265

本文详细解析JavaScript中void关键字的作用，即计算表达式但不返回值。通过多个代码实例展示其在防止链接跳转、执行脚本及算术运算中的具体用法，并对比javascript:void(0)与锚点链接#的区别，帮助开发者理解“死链接”的实现原理。

void关键字介绍

在JavaScript中，void是一个核心操作符，它的主要功能是计算指定的表达式或执行代码，但不会返回任何值。

其基本语法结构如下所示：

void func()
void(func())

实例1

利用该特性，可以创建一个点击后不产生任何页面跳转或刷新效果的超级链接。


<!-- 1.当用户链接时，void(0)计算为0,用户点击不会发生任何效果 -->
    <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow" >单击此处什么都不会发生</a><br>

实例2

通过该操作符，可以在链接点击时执行特定的JavaScript代码，例如弹出警告框或输出日志。


<!-- 2.执行 void() 操作符中的代码 -->
    <a href="javascript:void(alert('还真点啊你，真听话！！！哈哈哈！！！'))" rel="external nofollow" >点我弹出警告框!!!</a><br>
    <a href="javascript:void(console.log('还真点啊你，真听话！！！哈哈哈！！！'))" rel="external nofollow" >点我输出到控制台!!!</a><br>

实例3

该操作符同样可以用于执行算术运算或变量赋值，但运算结果会被忽略。

HTML部分：


<button type="button">点我</button>

JavaScript部分：


<script type="text/javascript">
        document.querySelector('button').addEventListener('click', function () {
            var a, b, c, d;
            a = void(b = 2, c = 3);
            console.log('a => ' + a);
            console.log('b => ' + b);
            console.log('c => ' + c);
            console.log('d => ' + d);
        });
    </script>

控制台输出结果：

void关键字介绍

从输出可见，变量a被赋值为void表达式的结果（即undefined），变量b被赋值为2，变量c被赋值为3，而变量d仅声明未赋值，因此其值为undefined。

# 与 javascript:void(0)的区别:

使用#作为链接地址时，点击后页面会滚动到具有对应id的元素位置。

而javascript:void(0)则使链接保持原地不动，通常被称为“死链接”，因为它不会触发页面跳转。

以下示例展示了两种链接的不同行为：


<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow" >你点吧，反正我就是不动，嘿嘿嘿！！！</a><br>
    <a href="#destination" rel="external nofollow" >点我跳转</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h2 id="destination">目的地</h2>

点击第一个链接（javascript:void(0)）时，页面没有任何反应。
点击第二个链接（锚点链接）时，页面会滚动至指定id的位置（即页面底部）。

至此，关于javascript:void(0)的含义及用法实例的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53