检查嵌套对象属性是否为空的优雅方法

在项目中经常会遇到这样的情况，要对对象下的属性进行操作，由于js里面访问undefined或者null的成员会报错，所以我们一般a && a.b && a.b.c这么实现。可是如果属性嵌套层级很多呢？一直写&&判断？显然，不，就是不优雅。

下面就是几种优雅的检查嵌套对象属性是否为空的方法~~~

使用极为先进的Lodash

lodash文档

// 引入lodash库

let object = {
    user: {
        loc: {
            lat: 50,
            long: 9
        }
    }
}
console.log(_.get(object, 'user.lat.loc'))  // 输出undefined
// 直接调用不存在的对象下的值也不会报错TypeError: Cannot read property 'loc' of undefined
console.log(_.get(object, 'user.loc')) //  {lat: 50, long: 9}
console.log(_.get(object, 'user.loc.lat')) // 50
console.log(_.get(object, 'user.loc.lat1')) // undefined 
console.log(_.get(object, 'user.loc.lat1', '默认值')) // 默认值

ES2020新语法[可选链]、[双问号]

可选链操作符

let object = {
    user: {
        loc: {
            lat: 50,
            long: 9
        }
    }
}
console.log(object.lat.loc) 
// Uncaught TypeError: Cannot read property 'loc' of undefined
console.log(object?.lat?.loc) // undefined

双问号操作符

双问号操作符其实就和lodash的get功能一样，可以设置默认值

let object = {
    user: {
        loc: {
            lat: 50,
            long: 9
        }
    }
}
console.log(object?.lat?.loc) // undefined
console.log(object?.lat?.loc ?? '默认值') // 默认值

自己封装函数实现

reduce的参数有点多，如果不是很了解，可以康康这里

const getObjectValue = (object, key) => {
    return key.split('.').reduce((pre, current) => {
        return (typeof pre === 'undefined' || pre === null) ? pre : pre[current];
    }, object)
}
console.log(getObjectValue(object, 'user.loc.lat')) // 50
console.log(getObjectValue(object, 'user.loc.lat2')) // undefined
console.log(getObjectValue(object, 'user.loc2.lat'))// undefined

拓展题，检查对象是否为空

一般来说，我们都是直接if(!x){}来判断对象是否为空，那么是否有正规的方法呢？

判断一个变量是否为空对象时，可以通过for…in语句遍历变量的属性，然后调用hasOwnProperty()函数，判断是否有自身存在的属性，如果存在则不为空对象，如果不存在自身的属性（不包括继承的属性），那么变量为空对象。

function isEmpty(obj) {
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            return false;
        }
    }
    return true;
}