js 中使用idx模块方便获取链条式的对象属性值

1. 背景

从一个js对象的属性值中的属性再次获得值，或者从集合中获得元素再获得属性值要写很多判断是否空的表达式，才能继续读取，否则就出现异常。这在开发过程很繁琐的事情，idx 模块就是来解决这个问题的可选方案之一。

比如说

代码语言：javascript复制

const user =  {
    name: jack,
    friends: [
                 { name: zhang3},
                 { name: li},
              ],
  };

直接写 user.friends[0].name 可能或出现 属性不存在导致异常，我们不得去写判断空的条件。

从这个 user 里取出 第一个 friends 的属性要可能要这么写：

代码语言：javascript复制

props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends

糟糕之处：它太繁琐了。so, 我们引入 idx 模块 来帮我们简化开发。

2.知识

' idx '是一个用于遍历对象和数组上的属性的实用函数。

如果中间属性为空或未定义，则返回空。idx 的目的是简化从链中提取属性值的过程，省得每次写各种判空条件以方便开发。

idx 这个模块是作为权宜之计存在的，因为JavaScript目前还没有直接的可选的“链条式读取属性的支持”。

示例：

代码语言：javascript复制

idx(props, _ => _.user.friends[0].friends)

3. 思考

其实，idx 模块对具体的实现做了封装，它帮我们内部实现了各种判断。 比如：

代码语言：javascript复制

import idx from 'idx';

function getFriends() {
  return idx(props, _ => _.user.friends[0].friends)
};

实际 是下面这样的实现。

代码语言：javascript复制

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. 扩展

安装

代码语言：javascript复制

$ npm install idx babel-plugin-idx

配置 在 Babel 里使用时，要配置：babel-plugin-idx 插件.

代码语言：javascript复制

{
  plugins: [
    ["babel-plugin-idx"]
  ]
}

5.参考：

https://github.com/facebookincubator/idx

babel.js

0 人点赞