javascript 中的 obj?.prop 语法是什么？ [复制]答案

【问题标题】：What is the obj?.prop syntax in javascript? [duplicate]javascript 中的 obj?.prop 语法是什么？ [复制]
【发布时间】：2019-06-28 22:32:56
【问题描述】：

我在查看代码时发现了这个：

{{abc?.xvy=== tyu?abc?.xz:abc?.xz}}

我无法理解这个表达的意思。我知道这是空安全的属性访问，但我对链接有点困惑。非常感谢任何帮助

【问题讨论】：

我希望这段代码不要在任何地方使用。
不幸的是我看到它被使用了。为什么不应该使用它？
真的一点都不可读，abc, xvy tyu 太通用了，没用，而且 ternay 运算符也没用，因为两个结果都是一样的，就像提到的@987654321 @

【解决方案1】：

它的新 ES 提议称为“可选”，用于安全检查读取对象属性。上面的表达式等价于：

(abc && abc.xvy) === (tyu) ? (abc && abc.xz) : (abc && abc.xz)

【讨论】：

【解决方案2】：

这看起来是optional chaining 提案的一个示例，该提案仍在进行中（仅在第一阶段）。它实际上还没有在 vanilla JS 环境中实现。使用

obj?.prop

表示：如果obj 未定义或为空，则表达式的计算结果为undefined。但除此之外，它将评估为对象上的 prop 属性。这是

的语法糖

obj && obj.prop

（如果obj 未定义或为空，则仅使用obj.prop 将抛出）

所以，你的

abc?.xvy=== tyu?abc?.xz:abc?.xz

如果嵌套值abc?.xvy 等于嵌套值abc?.xz -

将评估为true - 或，如果至少一个嵌套值将评估为true不存在，另一个是undefined。

为了便于阅读而隔开：

abc?.xvy === tyu
? abc?.xz
: abc?.xz

如您所见，? 和 : 表达式是相同的，因此这里不需要条件运算符。一个等效的测试（假设引用 tyu 不会抛出）将是

abc?.xvy === abc?.xz

【讨论】：

【解决方案3】：

它被称为Null Propagation Operator。

我们可以将每个 ?. 运算符视为一个短路，其中“如果到此为止的表达式为 null 或 undefined，则整个表达式的计算结果为 undefined"。我们也可以选择调用函数。

【讨论】：