JS 中如何优雅的使用多层嵌套属性而不会发生报错

128 阅读 0 评论 85 点赞

我是靠谱客的博主谨慎雪碧，这篇文章主要介绍JS 中如何优雅的使用多层嵌套属性而不会发生报错，现在分享给大家，希望可以做个参考。

在这里插入图片描述
平时在写js的时候遇到多层属性嵌套，一般大家敢直接用点使用吗？
有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function
一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是

复制代码

1
2
3
4
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：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

复制代码

1
2
3
4
5
var myURL;
if (Bro(app).doYouEven('config.environment.buildURL')) {
    myURL = app.config.environment.buildURL('dev');
}

方法5：

lodash

复制代码

1
2
3
4
5
6
7
8
9
10
11
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'