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

如何解决JavaScript：理解 ?? 中的 void 0运算符 polyfill

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

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

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

变成：

const App = () => {
  const foo = 'custom value';
  return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("div",{
    children: foo !== null && foo !== void 0 ? foo : 'default value'
  },void 0,false,{
    fileName: _jsxFileName,lineNumber: 7,columnNumber: 9
  },undefined);
};

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

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

解决方法

void 0 与 undefined 相同，大多数时候。使用 void 0 有两个好处：

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

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

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

  // later in the code:

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

这是一个非常病态的案例，但使用 void 0 稍微安全一点。

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