類型錯誤和短路評估？

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 || 空值;