浅谈如何安全取得对象的值

背景详情

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

当我们需要读取该对象中数组的某个值时如下

obj.a.b.c[1];

可是自己读取，代码的容错几乎为0，如果obj对象中没有a属性会报错，obj.a中没有b会报错，obj.a.b没有c会报错。这样的报错信息在与后台交互中，数据渲染经常出现，为了解决该问题，常见的使用方法

obj || obj.a || obj.a.b || obj.a.b.c || obj.a.b.c[1]

由上面代码可看出，在浅层嵌套中，使用该方法能有效避免数据错误问题。如果深层嵌套，会导致读取属性冗余。

方法改进

扩展对象方法

;(function(){
    if(Object.prototype.getSafetyVlaue) return false;
    Object.prototype.getSafetyVlaue = function(str,df){    // str为属性调用字符串，df为查询为空默认返回字段
        if((typeof str).toLowerCase() !== 'string') throw 'getSafetyVlaue options is error.'
        var arr = str.split('.'),
            obj = this,
            df = df || null;
        for(var i = 0;i < arr.length;i++){
            if(obj[arr[i]] === null || obj[arr[i]] === undefined) return df;
            obj = obj[arr[i]]
        }
        return obj
    }
})()
console.log(obj.getSafetyVlaue('a.b.c.1'));  // 2
console.log(obj.getSafetyVlaue('c.b.c.1'));  // null
console.log(obj.getSafetyVlaue('c.b.c.1','默认值'));  // 默认值

上面可以看见，给对象扩展一个方法为getSafetyVlaue方法，由于该方法扩展给的是对象，所以使用之前依然得先判断obj对象存在，也就是把多层短路改为一层短路来执行。同为，为此也进行了另一种变种的改进，在不变逻辑的基础上进行另外一种变种，添加数组方法：

;(function(){
    if(Array.prototype.getObjectValue) return false;
    Array.prototype.getObjectValue = function(obj,df){
        if((typeof obj).toLowerCase() !== 'object') throw 'getObjectValue options is error.'
        var o = obj;
        df = df || null;
        if(!o) return df
        for(var i = 0;i<this.length;i++){
            if(o[this[i]] === null || o[this[i]] === undefined) return df;
            o = o[this[i]]
        }
        return o;
    }
})()
console.log(['a','b','c',1].getObjectValue(obj))  // 2
console.log(['c','b','c',1].getObjectValue(obj))  // null
console.log(['c','b','c',1].getObjectValue(obj,'默认值'))  // 默认值
该变种方法好处在于需要判断的数组是我们控制的，无需自己添加任何判定条件，可是博主个人认为将一个对象读取方法扩展到一个数组方法中不便于理解，所以两种方法算各有优劣吧。

方法延伸

网上还有更多的方法进行该操作的处理，有兴趣的可以继续多深入看看。