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

Posted 2022-12-14 优小U

平时在写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：

lodash

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'