链式取值（转载整理）卖坚果的怪叔叔

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

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 链式取值