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

http://www.taodudu.cc/news/show-3224550.html

相关文章:

  • 【成功 debug】Assertion idx_dim >= 0 idx_dim < index_size “index out of bounds“
  • Fashion MNIST数据集的处理——“...-idx3-ubyte”文件解析
  • Embedding之padding_idx学习
  • python读取idx_通过Python从.idx3-ubyte文件或GZIP中提取图像 - python
  • python idx是什么_使用Python解析MNIST数据集(IDX文件格式)
  • 数据集解析 001:MNIST数据集与IDX文件(附带IDX文件提取代码Python版)
  • 【find指令】在Ubuntu系统下花式查找文件
  • Python+Selenium自动化学习笔记一
  • JavaWeb(模糊查询include指令)
  • 微信小程序提示db.RegExp is not a function(已解决)附加代码
  • 获取淘宝搜索商品列表数据
  • 头部导航(音乐app项目-第1步)
  • 一、ICESat-2数据查询,下载,与处理
  • A*搜索C++实现
  • c++深度优先搜索详解
  • 前端开发icon高清图标搜索、下载网站
  • linux docker查找镜像文件,搜索/下载/构建自定义/删除Docker镜像,运行和删除Docker容器的方法...
  • linux 日志中查找关键字
  • java乱码utm-8_常用地址收集
  • linux ag递归搜索文件内容
  • iconfont 使用规则
  • 9-1 判断字符的类型及原理的剖析(部分待定)
  • C++二分查找模板
  • 【C/C++】二分查找算法模板总结(适用于大多数情况)
  • BeautifulSoup爬取国家政策网目标话题的10篇文章,以及基于jieba的关键字生成
  • CSS:运用阿里巴巴矢量库快速在对应位置加上好看的图标
  • web test LoadRunner Solar / canshuhua / sousuo
  • python操作三大数据库百度云_【python操作三大】下载 - 面包树
  • js实现搜索框跳转功能
  • HTML+CSS实现搜索框

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

  1. C#通过属性名字符串获取、设置对象属性值

    目录 #通过反射获取对象属性值并设置属性值 0.定义一个类 1.通过属性名(字符串)获取对象属性值 2.通过属性名(字符串)设置对象属性值 #获取对象的所有属性名称及类型 #判断对象是否包含某个属性 ...

  2. js中如何优雅修改一个多层嵌套list对象的值

    如何优雅更改一个N层嵌套对象属性的值 看下边的代码,要加工一个嵌套list的属性值,然后再赋值回去,大概只能这样写: dp.data.treelist = dp.data.treelist.map(. ...

  3. java获取实体类对象_java 获取实体类对象属性值的方法

    在java中我们要获得实体类对象的属性,一般情况是将实体类中的属性私有化,然后再对外提供get()与set()方法,然后再获取实体类对象的属性的时候先把对象new出来,再用变量名.get()的方法得到 ...

  4. js中直接通过id名获取到这个元素

    浏览器日常bug: 最近在复习javascript的时候发现了一个我还没有见过的一个有趣的东西,可能你也没有见过,所以就在这里记录一下:就是js中直接通过id名获取到这个元素,且不使用getEleme ...

  5. Vue由本地js中存放的url地址获取图片

    Vue由本地js中存放的url地址获取图片 对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取 注意:url地址必须用这种形式,有requ ...

  6. 后处理程序文件大小的变量_【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?...

    关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...

  7. matplotlib之pyplot模块——获取/设置对象属性值(setp()、getp/get())

    当前有效matplotlib版本为:3.4.1. 概述 pyplot模块提供了获取/设置对象属性值的接口.功能类似于Python内置函数getattr和setattr.从源码上来看,get()是get ...

  8. 深入理解java注解,java的4个元注解,注解三要素——定义、使用及读取执行,深入了解注解的底层本质,通过反射自动、动态获取注解所有属性以及属性值

    1. 注解的定义 注解也是一种引用类型,编译后会生成 .class 字节码文件,作用就是为程序进行标识,不同注解能实现不同功能. 2. 注解的使用 3. 注解的读取执行 3.1 得不到注解信息,得到的 ...

  9. VS中warning MSB8012:TargetPath与 Linker 的 OutputFile 属性值不匹配

    VS中warning MSB8012:TargetPath与 Linker 的 OutputFile 属性值不匹配 warning MSB8012: TargetPath(D:\ModuleWm 20 ...

最新文章

  1. 工作经验:Java 系统记录调用日志,并且记录错误堆栈
  2. SlidingMenu(一)
  3. 不想当管理者、甚至连项目经理都也不想当,只想静心写写代码、不做管理
  4. linux运行级别debian,Debian的运行级别
  5. 机器学习-贝叶斯网络
  6. 47 - 算法 - 记住常用位运算-Leetcode-136-只出现一次的数字
  7. Spring Boot 2 Webflux的全局异常处理
  8. redis expire超时操作
  9. 实现人工智能价值的障碍有哪些?
  10. 现实世界的Windows Azure:采访Transparencia Sp. z o.o的Grzegorz Skowron-Moszkowicz
  11. Java基础知识笔记第八章:常用的实体类
  12. 区块链与程序员:赚钱还是创业
  13. 虚拟项目团队构建与管理
  14. MALLOC_PERTURB_ 环境变量
  15. Unity Editor模式编辑属性即时生效
  16. java 拼图游戏_Java学员作品-拼图游戏
  17. End-to-end/hand-crafted的含义(深度学习)
  18. 纯电小型领军者 奇瑞无界Pro
  19. 最全银行核心系统架构解读(165页PPT)
  20. win7系统如何关闭安全模式,关闭安全模式的方法

热门文章

  1. 【OpenGL学习笔记②】——OpenGL基础【渲染管线 顶点着色器 片元着色器 VAO VBO 万字总结】
  2. 自然语言处理之循环神经网络
  3. python一行代码走天下
  4. 联想E46G 不触发
  5. K12教培老师在新政下面临失业,该何去何从?
  6. 程序猿为什么不喜欢写文档?
  7. 【创建tensorflow severing容器出错】failed: Out of range: Read less bytes than requested【已解决】
  8. 为什么停用CentOS?
  9. 雅思经验(9)之小作文常用词汇总结
  10. 蓝桥杯单片机第七届省赛题详细讲解(模拟风扇控制系统)