JavaScript:void(null) 运算符

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript:void(null) 运算符

作者：迹忆客最近更新：2024/03/21 浏览次数：

根据字典，void 是指空的空间。该术语是指在编程中使用时不返回任何内容或空值。

阅读本文后，你将了解 JavaScript:void(0) 运算符。你还将了解 void 运算符，包括它是如何工作的，以及如何与 JavaScript: 链接 href 属性的伪 URL 一起使用。

JavaScript 中的 `Void` 关键字

术语 void 是指不返回任何内容的函数。这类似于显式返回 undefined 的 JavaScript 函数，如下面的代码所示。

function und() {
  return undefined
}
und()

或者隐含地，就像下面的代码一样。

function und() {}
und()

无论上述例程中使用的表达式和语句如何，都不会返回任何结果。

你现在应该了解 void 一词的含义。另一方面，JavaScript:void(0) 更复杂。

JavaScript 中的 `JavaScript:void(0)`

如果 JavaScript:void(0) 被拆分，你将拥有 JavaScript: 和 void(0)。让我们仔细看看每个组件。

`JavaScript:`

Pseudo URL 就是所谓的。当浏览器将此值作为锚标记 href 值接收时，它会解释冒号 : 后的 JavaScript 代码，而不是将值视为引用路径。

例如，使用下面的代码。

<a href="javascript:console.log('javascript');alert('javascript')">Link</a>

当你运行上面的代码时，你会看到一个链接按钮出现；单击此按钮时会显示一个弹出窗口。结果如下面的屏幕截图所示。

如上所示，浏览器不会将 href 视为引用路径。相反，它被视为以分号分隔的 javascript: 之后开始的 JavaScript 代码。

`void(0)` 运算符

void 运算符分析表达式并在计算时返回 undefined。例如，看下面的代码。

const result = void (1 + 1);
console.log(result);
// undefined should be returned

表达式 1 + 1 被计算，但结果是 undefined。这是另一个支持这一点的例子。

<body>
  <h1>Heading</h1>
  <script>
        void(document.body.style.backgroundColor = 'black',
             document.body.style.color = 'white'
        )
  </script>
</body>

上面代码的结果是：

下面给出了如何编写此代码的另一个示例。

console.log(void (0) === undefined)
    // true

结合 `JavaScript:` 和 `void(0)`

JavaScript 的 void 运算符计算一个表达式并返回一个 undefined 值。你可能会遇到使用 href="JavaScript:Void(0)"; 的 HTML 文档有时在 <a> 元素中。

将表达式插入网页时经常使用 JavaScript void，这可能会产生不必要的副作用。

使用 JavaScript:Void(0) 可以消除不需要的副作用，因为它将返回 undefined 原始值。超链接是 JavaScript:Void(0) 的典型用法。

你可能需要从链接中调用一些 JavaScript。当你单击链接时，你的浏览器通常会打开一个新页面或刷新现有页面（取决于指定的 URL）。

如果你已将 JavaScript 附加到该链接，你可能不希望这种情况发生。你可能想使用 JavaScript:void(0) 来防止页面重新加载。

`JavaScript:void(0)` 的示例

想象一下，你有一个链接，只有在单击两次（双击）后才能工作并显示一条消息。如果你只单击一次，则不会发生任何事情。

ondblclick 事件处理程序可以提供双击代码。你可以使用 JavaScript:void(0); 在锚链接中，以避免网站通过单击刷新。

为此，请使用下面的代码。

<a href="JavaScript:Void(0)";" ondblclick="alert('Good Job!')">Double Click!</a>

运行上面的代码时会出现一个 Double Click 按钮。单击此按钮时，会出现一个弹出窗口，上面写着 Good Job!你可以在下面的屏幕截图中看到结果。

它在 void 的帮助下通知浏览器不要返回任何内容或 undefined。javascript:void(0) 引用的链接的另一个用例是链接可以在后台执行 JavaScript 代码，从而无需导航。

在这种情况下，表达式将作为参数提供给 void。单击页面时，它不会导航另一个页面或重新加载当前页面。

通过阅读本文，你了解了 void 运算符是什么、它是如何工作的，以及如何在这个简短的教程中将它与链接的 href 属性的 javascript: 伪 URL 一起使用。

上一篇：JavaScript 中检查 Cookie 是否存在

下一篇：多个 JavaScript 构造函数的模式

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享