类型错误和短路评估？答案

【问题标题】：type error and short-circuit evaluation?类型错误和短路评估？
【发布时间】：2021-11-30 07:44:38
【问题描述】：

TS 代码

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

错误

TypeError: Cannot read property 'url' of null

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

【问题讨论】：

标签： javascript typescript

【解决方案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;

如果a.b 没有属性c，则无法获得url。这就是错误被抛出的原因，这不是最后的“或”可以捕捉到的东西。

【讨论】：

【解决方案2】：

我认为您对 "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，随你的便。

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

【讨论】：

【解决方案3】：

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

您可以尝试以下方法：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

因为在评估this.selectedItem.image.url 本身时发生了错误。你可以这样修复它：

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

【讨论】：

【解决方案6】：

打字稿：

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

【讨论】：

这是一个语法优雅的问题解决方案，但没有直接回答 OP 的问题，这就是为什么短路评估没有将错误视为错误并评估另一侧||