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"]
]
}
网友评论