javascript 中的 obj?.prop 语法是啥？ [复制]

Posted 2023-03-03

【中文标题】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)

您可以在此处找到更多详细信息：https://github.com/davidyaha/ecmascript-optionals-proposal

【讨论】：

不过，OP 的代码没有对 xz 变量的任何独立引用。

(tyu) ? (abc && abc.xz) : (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"。 我们也可以选择调用函数。