类型错误和短路评估？

Question

TS代码

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

错误

TypeError: Cannot read property 'url' of 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;

如果ab没有属性c则无法获取url 。 这就是引发错误的原因，而结尾处的“或”则无法捕捉到该错误。

Answer 2

我认为您对“短路”的含义感到困惑。 从左到右计算布尔运算符（ && ||在||之前，否则从左到右），直到结果肯定是虚假的或真实的，然后它停止而不进行任何其他评估。 在您的情况下，在评估this.selectedItem.image.url和||时会发生错误。 永远不会到达运算符。

JavaScript缺少null / undefined-coalescing运算符，例如Elvis运算符 “ ?. ”，它可以让您执行如下操作： this.selectedItem?.image?.url以防止取消引用undefined值。

相反，您需要检查每个可能的嵌套属性是否存在，如果可能未定义它们：

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

（我相信其他的答案也提到这样的事情......啊，对了，@Cerbrus有它）现在这是短路的方式，可以帮助你。 这些项目之一一旦出现虚假，整个括号中的术语即被视为虚假，而不会引发错误。 然后你就会变得虚假- || null || null ，根据需要变为null 。

希望能有所帮助； 祝好运！

Answer 3

您正在检查this.selectedItem.image.url ，但是要使此成为可能，您需要确保this.selectedItem.image存在this.selectedItem和this.selectedItem.image 。

您可以尝试以下方法：

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

Answer 4

我认为您还需要检查该字段image存在。 尝试改用三元运算符：

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

Answer 5

因为在评估this.selectedItem.image.url本身时发生了错误。 您可以通过以下方式解决它：

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

Answer 6

我知道这是一个老问题，但我想检查这是否适合作为答案，现在是 2021 年：

打字稿：

image = this?.selectedItem?.image?.url || 空值;