JavaScript: 了解 ?? 中的 void 0运算符 polyfill

Question

我很好奇 null 合并运算符 ?? 是否在默认 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？

Answer 1

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

它更短（这对缩小器很有用）
标识符 undefined 可以在不在顶层时创建，导致意外行为：

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

  // later in the code:

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

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

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

JavaScript: 了解 ?? 中的 void 0运算符 polyfill

JavaScript: understanding void 0 in ?? operator polyfill

javascript

reactjs

null-coalescing-operator