有没有可以在数组上使用的安全导航运算符之类的东西？答案

【问题标题】：Is there something like a Safe Navigation Operator that can be used on Arrays?有没有可以在数组上使用的安全导航运算符之类的东西？
【发布时间】：2017-11-22 14:47:33
【问题描述】：

我使用 Safe Navigation Operator for Objects 来加载异步调用，这非常棒。我以为我可以为 Arrays 重现相同的内容，但它在我的 Angular 代码中显示模板解析错误。我知道*ngIf 是一种替代解决方案，但有没有更简单（通过代码）的方式，就像安全导航运算符一样？

<div class="mock">
   <h5>{{data?.title}}</h5>  //This works
   <h6>{{data?.body}}</h6>  //This works
   <h6>{{simpleData?[0]}}</h6>  // This is what I tried to implement    
</div>

【问题讨论】：

是的，JavaScript 和 TypeScript 将此称为 Optional Chaining 运算符，它确实适用于数组。请参阅此页面上的 my answer 以及 this question。

标签： html angular typescript safe-navigation-operator

【解决方案1】：

有没有更简单（通过代码）的方式，就像 Safe Navigation Operator 一样？

有ternary operator。

条件？ expr1 : expr2

<h6>{{simpleData?simpleData[0]:''}}</h6>

【讨论】：

这是我一定忽略的。它起作用了：D
当您拥有相当复杂的深度数据时，这往往会变得非常难以阅读：((a?.b||[])[13]?.c||[])[7] 而不是现代 ECMAscript 中的 a?.b?.[13]?.c?.[7]
虽然不完全是 Angular 特定的，但您也可以使用 lodash 安全地检索更深层嵌套的对象。例如get myData() { return _.get(this.thing, 'a[0].b.c'); }lodash.com/docs/4.17.15#get

【解决方案2】：

当然这是个人喜好问题，但在这种情况下，我倾向于使用更短的方法：

<h6>{{(simpleData || [])[0]}}</h6>

【讨论】：

但它是空数组，所以访问第一个元素无论如何都会失败？
不，不会的。读取不存在的元素会返回undefined，Angular 会将其转换为空结果。
有些人可能会考虑使用Nullish Coalescing operator (??) 现在被认为是一种更好的做法：(simpleData ?? [])[0]。也就是说，现在可用的Optional Chaining operator (?.) 为所述问题提供了更直接的解决方案。

【解决方案3】：

其他答案是相同的，但我发现foo && foo[0] 是最易读的。如果左侧是假的，则不会评估逻辑与运算符的右侧，因此您可以安全地获得 undefined（或者我猜是 null，如果您不相信 Douglas Crockford。）具有最少的额外字符.

就此而言，您要求“更简单”的解决方案，但实际上*ngIf 对于您提供的用例可能是正确的。如果您在此处使用任何答案，您将得到一个不需要的空 h6 标签。如果您将标签本身设置为有条件的，您只需将foo[0] 放在把手中，并确信当foo 仍未定义时它不会被评估，而且您永远不会用空标签污染页面。

【讨论】：

【解决方案4】：

是否有类似安全导航运算符的东西可以在数组上使用？

是的，您正在寻找的就是可选链接运算符 (JavaScript / TypeScript)。

MDN JavaScript 文档中显示的语法是：

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

所以，要实现你想要的，你需要改变你的例子：

<h6>{{simpleData?[0]}}</h6>

收件人：

<h6>{{simpleData?.[0]}}</h6>
                 ^

另见How to use optional chaining with array in Typescript?。

【讨论】：

对于任何人来说这是最新的，这也可以用于组件逻辑。