JavaScript 的 void 运算符的实际用例是什么？

Question

为什么有人会写：

function () {
    if (err) {
        return void console.log(err)
    }
}

而不是：

function () {
    if (err) {
        console.log(err)
        return
    }
}

有人使用过

void

运算符吗？我见过它像上面的示例一样被使用，但非常非常罕见。

更新

console.log

可能是一个糟糕的例子，因为它返回

void

本身。让我展示一下我在

express

应用程序中看到的另一种用法：

function (req, res) {
    ...
    // Some error occurred
    if (err) {
        return void res.send(foo)
        // `send` returns a `Response` instance
    }
}

例如在

eslint

的源代码中，它被大量使用：

config-initializer.js

jshint.js - 大文件警告！

一致返回.js

Answer 1

一个用例是，当 undefined

本身没有执行相同操作时，它总是

返回 

undefined。在大多数现代浏览器中，

window.undefined

不可写，但可以隐藏为有效的变量名称。好吧，我不会说这是一个真实的案例场景，但这是一种万无一失的返回方式

undefined

。

function whendefined(){
    var undefined = 'defined';
    return undefined;
}

console.log(whendefined());

function neverdefined(){
    var undefined = 'defined';
    return void 0;
}

console.log(neverdefined());

MDN 社区文档也有相同的内容

该运算符允许插入产生副作用的表达式 到计算结果为未定义的表达式的地方 想要的。 void 运算符通常仅用于获取未定义的 原始值，通常使用“void(0)”（相当于“void 0")。在这些情况下，可以使用全局变量 undefined 来代替 （假设尚未分配非默认值）。

es-lint 示例中的使用可能只考虑文件大小，因为这些文件不会以任何方式缩小。

"undefined".length; //9
"void 0".length;//6

10,000 次下载可节省约 30,000 字节。

一致返回与此没有直接关系，它只是确保返回值被显式且一致地指定。在整个代码中，使用 void 0 的考虑似乎是文件大小的考虑，并且可能是作者从旧浏览器中继承的一些旧风格编码，甚至可以覆盖

window.undefined

。

Answer 2

上面两个函数做的是同样的事情，只是前者写在一行中。 void 最常用于超链接的内容中，浏览器可能会解释返回的结果并尝试显示结果。

在更新的代码中，void 很重要，因为函数的作者希望在一行中执行以下操作。

1. 执行res.send(foo)
2. 返回 void（无）

因此他/她使用 void 将结果转换为未定义

Answer 3

用例 1

在我的代码中，我总是启用 ESLint 的

no-floating-promises

，这确保我永远不会忘记等待一个 Promise（回想起我花费的调试时间才发现它就是这样）。

然而，有时也有一些承诺我想不等待，让它们在后台运行。在这些情况下，

void

关键字使得 ESLint 看起来好像 Promise 正在被消耗，但实际上并没有：

fetch('https://google.com/') // ESLint error: no-floating-promises

void fetch('https://google.com/') // Does the same thing; no ESLint error

用例 2

在其他人的代码中，您经常会看到它与文字结合使用

0

:

{ code: "function foo() { if (true) return; else return void 0; }", options: [{ treatUndefinedAsUnspecified: true }] },
--------------------------------------------------------^^^^^^ HERE

可以出于以下两个原因之一来完成此操作：

• 参见 @sabithpocker 的回答：因为

  undefined

  可以被遮蔽，而

  void

  不能。 当代码与任意用户代码混合时（例如在优化器中）特别有用；可以想象，用户可能创建了一个名为“未定义”的变量。
• 因为

  void 0

  比

  undefined

  短。特别是在编译的代码中（例如，如果它是通过 terser 或 webpack 传递的），最小化包中的字符数量非常重要。

  void 0

  有 6 个字符，而

  undefined

  有 9 个字符，因此对于优化器来说，用

  undefined

  替换

  void 0

  的所有实例是一个简单的三字符胜利。

---

TL;DR: void 关键字可用于：

• 逃避某些 linter 规则
• 将

  undefined

  替换为

  void 0

  以保存三个字符

Answer 4

我有一个找不到参考的用例：

overlay.classList.remove('entered');
void overlay.offsetWidth;  // necessary to trigger a one-time animation
overlay.classList.add('entered');

这是一个“技巧”，可确保浏览器执行动画帧，以便在

.entered

类上播放动画的触发器再次生效。

我现在找不到参考资料，所以很想知道哪些部分仍然是必要的。