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

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

作者: 张云飞Vir | 来源:发表于2021-05-26 12:24 被阅读0次

    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.参考:

    https://github.com/facebookincubator/idx

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ivnhsltx.html