卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › 链式取值(转载整理)

链式取值(转载整理)

坚果大叔
2022-03-17 7:43:29技术阅读数 347

实际开发的过程中,遇到取某个对象下的某个值,或者是未知对象下的某个属性的值。如果不确定这个值有没有怎么办?

res.data.money.list[0].price

比如上面这种,想获取data下面list数组的第一个的price的值。如果我们直接这样写,在money下没有list的时候就会报Uncaught TypeError: Cannot read property 'list' of undefined。之前是这样处理的。

if (res.data.money.list[0] && res.data.money.list[0].price) {

    // 实际业务逻辑部分

}

或者是更全的

if (
    res && 
    res.data && 
    res.data.money && 
    res.data.money.list && 
    res.data.money.list[0] && 
    res.data.money.list[0].price) {

    // 实际业务逻辑部分

}

可以看多如果层级更深这样写起来不是很优雅,所有就有了下面的方法。

1、通过babel插件 babel-plugin-transform-optional-chaining 来实现

a?.b                          
a == null ? undefined : a.b

a?.[x]                        
a == null ? undefined : a[x]

a?.b()                        
a == null ? undefined : a.b() 

a?.()                        
a == null ? undefined : a()  

2、通过函数解析字符串

// lodash的_.get方法

var object = { a: [{ b: { c: 3 } }] };

var result = _.get(object, 'a[0].b.c', 1);

3、使用解构赋值

const c = {a:{b: [1,2,3,4]}}

const { a: result } = c;
// result : {b: [1,2,3,4]}

cosnt {a: { c: result = 12 }} = c
// result: 12

4、使用Proxy

function pointer(obj, path = []) {
    return new Proxy({}, {
        get (target, property) {
            return pointer(obj, path.concat(property))
        },
        apply (target, self, args) {
            let val = obj;
            let parent;
            for(let i = 0; i < path.length; i++) {
                if(val === null || val === undefined) break;
                parent = val;
                val = val[path[i]]    
            }
            if(val === null || val === undefined) {
                val = args[0]
            }
            return val;
        }
    })
}

使用:

let c = {a: {b: [1, ,2 ,3]}}

pointer(c).a();   // {b: [1,2,3]}

pointer(c).a.b(); // [1,2,3]

pointer(d).a.b.d('default value');  

参考链接

如何优雅地链式取值 ?

JS 链式取值
赞赏 赞(1)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
胜利的曙光,就要来了
上一篇
利用yalc本地调试NPM组件库!
下一篇
再想想
所有评论(7)
  • 崔译宝宝

    66666

    1月前 回复
    • 坚果大叔

      @崔译宝宝: dididi滴

      1月前 回复
  • 邹江

    https://yun.zoujiang.com/boke/touxiang.jpg 更新一下友链头像,谢谢

    2月前 回复
    • 坚果大叔

      @邹江: 好的

      2月前 回复
  • 卖坚果的怪叔叔

    整理的不错

    2月前 回复
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 🌚🌚🌚🌚
  • TS文档
  • 密码保护:暂存
  • deep 不生效!
  • 过去的,一点记录!
归档
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
🌚🌚🌚🌚
2022-05-17 22:12:24
75 3 0
TS文档
2022-05-11 21:09:30
79 0 1
密码保护:暂存
2022-05-11 10:21:14
57 0 0
deep 不生效!
2022-05-03 14:37:52
180 1 1
7 1
  • 1
  • 7
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
192
文章
47
评论
111
喜欢