idx：存在函数
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
在 Facebook，我们经常需要访问通过 GraphQL 获取的数据结构中的深层嵌套值。在访问这些深层嵌套值时，经常会遇到一个或多个中间字段可为空的情况。这些中间字段可能为空的原因多种多样，从隐私检查失败到用 null 表示非致命错误（这是最灵活的表达方式）都可能发生。
遗憾的是，目前访问这些深层嵌套的值既繁琐又冗长。
props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends;
目前有一项关于引入存在操作符的 ECMAScript 提案能大幅简化这一过程。但在该提案正式定稿之前，我们需要一个既能提升开发体验、保持现有语言语义，又能通过 Flow 强化类型安全的解决方案。
为此我们设计了一个名为 idx 的存在函数。
idx(props, _ => _.user.friends[0].friends);
以下代码片段中的调用行为与上例中的布尔表达式类似，但显著减少了重复代码。idx 函数严格接收两个参数：
-
任意值（通常是你想要访问嵌套值的对象或数组）
-
接收第一个参数并在其上访问嵌套值的函数
理论上，idx 函数会捕获因访问 null 或 undefined 属性而引发的错误。若捕获到此类错误，则返回 null 或 undefined。（具体实现可参考 idx.js）
但实际上，对每个嵌套属性访问进行 try-catch 操作速度很慢，且区分特定类型的 TypeError 也很脆弱。为解决这些缺陷，我们创建了 Babel 插件将上述 idx 调用转换为以下表达式：
props.user == null
? props.user
: props.user.friends == null
? props.user.friends
: props.user.friends[0] == null
? props.user.friends[0]
: props.user.friends[0].friends;
最后，我们为 idx 添加了自定义 Flow 类型声明，使得第二个参数中的遍历能进行正确的类型检查，同时允许在可为空的属性上进行嵌套访问。
该函数、Babel 插件和 Flow 声明现已发布于 GitHub。使用方式为：安装 idx 和 babel-plugin-idx npm 包，并在 .babelrc 文件的插件列表中添加 "idx"。