JavaScript：理解 ?? 中的 void 0 运算符填充

Question

我很好奇空合并运算符??在默认设置中是否有填充create-react-app。事实证明确实如此：

const App = () => {
    const foo = 'custom value';

    return (
        <div>
            {foo ?? 'default value'}
        </div>
    );
};

变成：

const App = () => {
    const foo = 'custom value';

    return (
        <div>
            {foo ?? 'default value'}
        </div>
    );
};

最有趣的部分是foo !== null && foo !== void 0 ? foo : 'default value'，它是运算符的 polyfill ??。虽然foo !== null很明显，但我不太明白这foo !== void 0部分。这是什么意思？

我检查了一下，void 0 === undefined是的true，但为什么不简单呢foo !== undefined？

Answer 1

void 0大多数时候undefined，是一样的。使用有两个好处：void 0

• 它更短（这对缩小器很有用）

• 标识符undefined可以在不在顶层时创建，从而导致意外行为：

(() => {
  const undefined = 'foo';

  // later in the code:

  const actuallyUndef = (() => {})();
  console.log(actuallyUndef === undefined);
})();

这是一个极其病态的情况，但使用void 0会更安全一些。

undefined古代浏览器过去也允许在顶层创建，但幸运的是现在不再允许了。