js 中使用idx模块方便获取链条式的对象属性值
1. 背景
从一个js对象的属性值中的属性再次获得值，或者从集合中获得元素再获得属性值要写很多判断是否空的表达式，才能继续读取，否则就出现异常。这在开发过程很繁琐的事情，idx 模块就是来解决这个问题的可选方案之一。
比如说
const user = {
name: jack,
friends: [
{ name: zhang3},
{ name: li},
],
};直接写 user.friends[0].name 可能或出现 属性不存在导致异常，我们不得去写判断空的条件。
从这个 user 里取出 第一个 friends 的属性要可能要这么写：
props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends糟糕之处：它太繁琐了。so, 我们引入 idx 模块 来帮我们简化开发。
2.知识
' idx '是一个用于遍历对象和数组上的属性的实用函数。
如果中间属性为空或未定义，则返回空。idx 的目的是简化从链中提取属性值的过程，省得每次写各种判空条件以方便开发。
idx 这个模块是作为权宜之计存在的，因为JavaScript目前还没有直接的可选的“链条式读取属性的支持”。
示例：
idx(props, _ => _.user.friends[0].friends)3. 思考
其实，idx 模块对具体的实现做了封装，它帮我们内部实现了各种判断。 比如：
import idx from 'idx';
function getFriends() {
return idx(props, _ => _.user.friends[0].friends)
};实际 是下面这样的实现。
function getFriends() {
props.user == null ? props.user :
props.user.friends == null ? props.user.friends :
props.user.friends[0] == null ? props.user.friends[0] :
return props.user.friends[0].friends
}4. 扩展
安装
$ npm install idx babel-plugin-idx配置
在 Babel 里使用时，要配置：babel-plugin-idx 插件.
{
plugins: [
["babel-plugin-idx"]
]
}5.参考：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
