我很好奇空合并运算符 ??
在默认 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
?
答案 0 :(得分:4)
void 0
与 undefined
相同,大多数时候。使用 void 0
有两个好处:
它更短(这对缩小器很有用)
标识符 undefined
可以在不在顶层时创建,从而导致意外行为:
(() => {
const undefined = 'foo';
// later in the code:
const actuallyUndef = (() => {})();
console.log(actuallyUndef === undefined);
})();
这是一个非常病态的案例,但使用 void 0
稍微安全一点。
古代浏览器过去也允许在顶层创建 undefined
,但幸运的是现在不再允许。