平时在写js的时候遇到多层属性嵌套,一般大家敢直接用点使用吗?
有没有开发的时候好好的,某一时刻突然出现一个控制台报错类似:Uncaught TypeError: xxx is not a function
一般这种情况就是没有判断是否有值,如果数据是后端返回的,有可能后端就是没有值或者值的类型不对,这些情况都可能导致出现程序出错,一般我们需要进行判断,常见的判断就是
if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){
// do something
}
如果层级太深或者类似判断逻辑太多,写起来有点烦,能把自己蠢哭。。。 下面有一些优雅的方式解决这个问题。
方法1:
扁平化处理:后台处理 / 前端预处理, 防止出现不存在值的情况
方法2:
ES6 使用 CoffeeScript: a?.b?.c?.d
方法3:
function checkNested(obj /*, level1, level2, ... levelN*/) {
var args = Array.prototype.slice.call(arguments),
obj = args.shift();
for (var i = 0; i < args.length; i++) {
if (!obj || !obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
}
var test = {level1:{level2:{level3:'level3'}} };
checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false
方法4:
https://github.com/letsgetrandy/brototype
var myURL;
if (Bro(app).doYouEven('config.environment.buildURL')) {
myURL = app.config.environment.buildURL('dev');
}
方法5:
var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'