Javascript null 检查性能(比较 if 和 try/catch)

Question

我必须获取内部组件的值。仅就性能进行比较时，哪个更好 1 或 2，此方法被调用多次。根据运行时的不同，foo可能为空，但foo可能具有值，但bar可能为空等。foo、bar、innerfoo、innerbar 中的任何一个都为空，这不是错误情况或意外情况，它们中的任何一个都可以在运行时为空，具体取决于层次结构。但是 innerbar 不能有任何值 如果 foo 为空，所以如果没有定义 foo，则无需检查内部组件。

//1
function getInnerValue() {
if (foo && foo.bar && foo.bar.innerfoo && foo.bar.innerfoo && foo.bar.innerfoo.innerbar) {
return foo.bar.innerfoo.innerbar.x;
}
return 0;
}
//2
function getInnerValue() {
try {
return foo.bar.innerfoo.innerbar.x;
}
catch (e) {
return 0;
}
}

Answer 1

任何触发尝试捕获的内容都会对性能造成很大影响。

就我个人而言，我不认为长串的真实检查比尝试捕获块的可读性差。 只是更长，丑陋和冗长。 但实际上，有人会在阅读(或编辑它(时遇到麻烦吗？ 或者更好的说，你甚至需要阅读它来理解它在做什么吗？
事实上，如果有的话，try catch 块感觉更像是一个黑客。 我仍然要考虑为什么我试图抓住一个异常，它仍然很丑陋。

无论如何，我们现在有可选的链接，所以上面的内容甚至不再重要。 我会选择类似return x?.y?.z?.a?.b?.c?.d||0.

您当然可以使用保护功能，因为您可能已经注意到阅读了您链接的线程。 像 lodash_.get或你自己的守卫(a，'b'，'c'，'d'(。

可选链接浏览器兼容性

可选链接的 Babel 转译输出

如果 x 为 null 或未定义，x?.y将立即返回undefined
浏览器兼容性相对较新。 检查兼容性表。 你应该将 Babel 转译添加到你的管道中。

不带转译的可选链接：

foo = {}
function fn() {
if (foo?.bar?.innerfoo?.innerbar)
return foo.bar.innerfoo.innerbar.x
return 0
}
console.log(fn())
foo = {bar: { innerfoo: { innerbar: { x: 5 }}}}
console.log(fn())

转译代码：

foo = {}
function fn() {
var _foo, _foo$bar, _foo$bar$innerfoo;
if ((_foo = foo) === null || _foo === void 0 ? void 0 : (_foo$bar = _foo.bar) === null || _foo$bar === void 0 ? void 0 : (_foo$bar$innerfoo = _foo$bar.innerfoo) === null || _foo$bar$innerfoo === void 0 ? void 0 : _foo$bar$innerfoo.innerbar) return foo.bar.innerfoo.innerbar.x;
return 0;
}
console.log(fn())
foo = {bar: { innerfoo: { innerbar: { x: 5 }}}}
console.log(fn())