使用可选链接运算符进行对象属性访问

Posted 2023-03-13

【中文标题】使用可选链接运算符进行对象属性访问

【英文标题】：Using optional chaining operator for object property access

【发布时间】：2020-03-05 22:16:15

【问题描述】：

TypeScript 3.7 现在支持optional chaining operator。因此，您可以编写如下代码：

const value = a?.b?.c;

即，您可以使用此运算符访问对象的属性，其中对象本身可能是null 或undefined。现在我想做的基本一样，只是属性名是动态的：

const value = a?[b]?.c;

但是，出现语法错误：

错误 TS1005: ':' 预期。

我在这里做错了什么？这甚至可能吗？

PS：proposal 似乎暗示这是不可能的 ???? （但也许我弄错了语法示例）。

【问题讨论】：

你没抓住重点，运营商是?.

是的，当然，非常感谢????

【参考方案1】：

使用括号表示法和可选链接访问属性时，除了括号之外，还需要使用点：

const value = a?.[b]?.c;

这是 TC39 proposal 采用的语法，否则解析器很难判断此 ? 是三元表达式的一部分还是可选链的一部分。

我的想法是：可选链接的符号不是?，而是?.。如果您正在执行可选链接，您将始终使用这两个字符。

【讨论】：

我会将 hard 替换为 impossible。

@vol7ron 为什么会这样-我认为它可以期待:

无法区分，尤其是有错误时。

@AnArrayOfFunctions 不会发生。语言中已经有一些地方可以通过这种前瞻性来解决问题。试想一下function(); 或a: 1.a; 语句都是语法错误。另外：嵌套三元组已经很难解析（a?[...b][1]?c:d?.e:f 是什么意思）。最好不要通过重载 ? 来增加难度。

哇，这太不直观了，因为可选链接语法减去“可选”部分是无效的。您不能以a.[b].c 的身份运行链接，因此a?.[b]?.c 只会被遇到问题并在线搜索的人发现。也许可以提出启用a.[b].c链接语法的建议？

【参考方案2】：

可选链操作符是?.

以下是一些可空属性和函数处理的示例。

const example = a: ["first", b:3, false]

// Properties
example?.a  // ["first", b:3, false]
example?.b  // undefined

// Dynamic properties ?.[]
example?.a?.[0]     // "first"
example?.a?.[1]?.a  // undefined
example?.a?.[1]?.b  // 3

// Functions ?.()
null?.()                // undefined
validFunction?.()       // result
(() => return 1)?.()  // 1

奖励：默认值

?? (Nullish Coalescing) 可用于在未定义或 null 时设置默认值。

const notNull = possiblyNull ?? defaultValue
const alsoNotNull = a?.b?.c ?? possiblyNullFallback ?? defaultValue

【讨论】：

a?.b?.c ?? default 和 a?.b?.c || default 有区别吗？

|| 检查所有错误值，因此 ''、0 和 false 将使用默认值，而 ?? 将仅默认为 null 和 undefined

哦，好的，知道这太棒了！谢谢