型号错误和短路评估？

Question

TS码

image = this.selectedItem.image.url || null; 

的错误

TypeError: Cannot read property 'url' of null 

我的问题是，为什么不是|| null踢踢而不是抛出类型错误？

Answer 1

你有最短的选项是：

image = this.selectedItem && this.selectedItem.image && this.selectedItem.image.url || null; 

如果任何&&的失败，你会得到null代替，但你必须检查每一个“级别“你试图访问的对象。

这工作，因为&&操作的顺序优先于||。上面的语句是类似于：

x = (((a.b) && (a.b.c)) && (a.b.c.url)) || null; 

你有什么，而另一方面，类似于：

x = (a.b.c.url) || null; 

你不能得到url如果a.b没有一个属性c。这就是错误发生的原因，而这不是最后的“或”可以捕捉到的东西。

Answer 2

您正在检查this.selectedItem.image.url，但要做到这一点，您需要确保首先存在this.selectedItem和this.selectedItem.image。

你可以尝试以下方法：

image = this.selectedItem && this.selectedItem.image ? this.selectedItem.image.url || null : null; 

Answer 3

您也需要检查现场image存在，我认为。尝试使用三元操盘手：

image = this.selectedItem.image ? this.selectedItem.image.url : null; 

Answer 4

因为当this.selectedItem.image.url本身进行评估发生的错误。你可以这样修复：

this.selectedItem.image = this.selectedItem.image || {} 
image = this.selectedItem.image.url || null; 

Answer 5

我想你对"short-circuit"的含义感到困惑。布尔运算符从左到右进行评估（&&之前||，但从左到右，否则），直到结果肯定是错误或真实的，然后停止而不评估其他任何东西。在你的情况下，错误发生在this.selectedItem.image.url正在评估，并且||运算符永远不会到达。

的JavaScript缺乏一个null/undefined-coalescing运营商，如Elvis operator“?.”，这将让你做这样的事情this.selectedItem?.image?.url防止非关联undefined值。

相反，你需要检查每一个可能的嵌套属性的存在，如果有可能他们是不确定的：

image = (this.selectedItem && this.selectedItem.image && this.selectedItem.image.url) || null; 

（我相信其他的答案也提到这样的事情...啊，是的，@Cerbrus有它）这现在短路的方式可以帮助你。只要其中一个项目是虚假的，整个括号内的术语评估为错误而不会产生错误。然后你会得到falsy- || null，它会变成null，如你所愿。

希望帮助;祝你好运！