[英]type error and short-circuit evaluation?
TS Code TS代码
image = this.selectedItem.image.url || null;
The Error错误
TypeError: Cannot read property 'url' of null
My question is, why isn't the ||我的问题是,为什么不是 || null kicking in instead of it throwing a type error?空踢而不是抛出类型错误?
The shortest option you have is: 您拥有的最短选择是:
image = this.selectedItem && this.selectedItem.image && this.selectedItem.image.url || null;
If any of the &&
fails, you'll get null
instead, but you have to check every "level" of the object you're trying to access. 如果任何&&
失败,您将得到null
,但是您必须检查要访问的对象的每个“级别”。
This works because the &&
takes priority over ||
之所以起作用,是因为&&
优先于||
for order of operation. 操作顺序。 The above statement is similar to: 上面的语句类似于:
x = (((a.b) && (a.b.c)) && (a.b.c.url)) || null;
What you had, on the other hand, was similar to: 另一方面,您所拥有的类似于:
x = (a.b.c.url) || null;
You can't get url
if ab
does not have a property c
. 如果ab
没有属性c
则无法获取url
。 That's what the error was thrown on, and that's not something the "or" at the end can catch. 这就是引发错误的原因,而结尾处的“或”则无法捕捉到该错误。
I think you're confused about what "short-circuit" means. 我认为您对“短路”的含义感到困惑。 Boolean operators are evaluated from left to right ( &&
before ||
but left-to-right otherwise) until the result is either definitely falsy or truthy, and then it stops without evaluating anything else. 从左到右计算布尔运算符( &&
||
在||
之前,否则从左到右),直到结果肯定是虚假的或真实的,然后它停止而不进行任何其他评估。 In your case, the error occurs while this.selectedItem.image.url
is being evaluated, and the ||
在您的情况下,在评估this.selectedItem.image.url
和||
时会发生错误。 operator is never reached. 永远不会到达运算符。
JavaScript lacks a null/undefined-coalescing operator such as the Elvis operator " ?.
", which would let you do something like this.selectedItem?.image?.url
to prevent dereferencing undefined
values. JavaScript缺少null / undefined-coalescing运算符,例如Elvis运算符 “ ?.
”,它可以让您执行如下操作: this.selectedItem?.image?.url
以防止取消引用undefined
值。
Instead, you need to check each possible nested property for existence, if it is possible for them to be undefined: 相反,您需要检查每个可能的嵌套属性是否存在,如果可能未定义它们:
image = (this.selectedItem && this.selectedItem.image && this.selectedItem.image.url) || null;
(I'm sure other answers have mentioned something like this... ah, yes, @Cerbrus has it) This is now short-circuiting in a way that helps you. (我相信其他的答案也提到这样的事情......啊,对了,@Cerbrus有它)现在这是短路的方式,可以帮助你。 As soon as one of those items is falsy, the whole parenthesized term evaluates as falsy without throwing an error. 这些项目之一一旦出现虚假,整个括号中的术语即被视为虚假,而不会引发错误。 Then you get falsy- || null
然后你就会变得虚假- || null
|| null
which becomes null
, as you want. || null
,根据需要变为null
。
Hope that helps; 希望能有所帮助; good luck! 祝好运!
You are checking this.selectedItem.image.url
, but for that to be possible, you need to make sure that this.selectedItem
and this.selectedItem.image
exist first. 您正在检查this.selectedItem.image.url
,但是要使此成为可能,您需要确保this.selectedItem.image
存在this.selectedItem
和this.selectedItem.image
。
You could try the following: 您可以尝试以下方法:
image = this.selectedItem && this.selectedItem.image ? this.selectedItem.image.url || null : null;
You need to check also if the field image
exists I think. 我认为您还需要检查该字段image
存在。 Try to use ternary operator instead: 尝试改用三元运算符:
image = this.selectedItem.image ? this.selectedItem.image.url : null;
Because the error occurred when this.selectedItem.image.url
itself was evaluated. 因为在评估this.selectedItem.image.url
本身时发生了错误。 You can fix it this way: 您可以通过以下方式解决它:
this.selectedItem.image = this.selectedItem.image || {}
image = this.selectedItem.image.url || null;
I know is an old question but I want to check if this fits as an answer, now in 2021:我知道这是一个老问题,但我想检查这是否适合作为答案,现在是 2021 年:
TypeScript:打字稿:
image = this?.selectedItem?.image?.url || image = this?.selectedItem?.image?.url || null;空值;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.