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

链式取值(转载整理)

坚果大叔
2022-03-17 7:43:29技术阅读 1,011

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

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组件库!
下一篇

评论已关闭

今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 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月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
140 0 0
小程序wx.showToast真机不显示?
2022-11-03 17:42:55
506 0 0
1
  • 1
博主

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

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

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