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

大 | 中 | 小
[不指定 2023/08/29 10:58 | by 刘新修 ]

 平时在写js的时候遇到多层属性嵌套，一般大家敢直接用点使用吗？

有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function
一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是
 
JavaScript代码
  1. if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){  
  2.     // do something  
  3. }  
 

如果层级太深或者类似判断逻辑太多，写起来有点烦，能把自己蠢哭。。。 下面有一些优雅的方式解决这个问题。

方法1：

扁平化处理：后台处理 / 前端预处理, 防止出现不存在值的情况

方法2：

ES6 使用 CoffeeScript: a?.b?.c?.d

方法3：

JavaScript代码
  1. function checkNested(obj /*, level1, level2, ... levelN*/) {  
  2.   var args = Array.prototype.slice.call(arguments),  
  3.       obj = args.shift();  
  4.   
  5.   for (var i = 0; i < args.length; i++) {  
  6.     if (!obj || !obj.hasOwnProperty(args[i])) {  
  7.       return false;  
  8.     }  
  9.     obj = obj[args[i]];  
  10.   }  
  11.   return true;  
  12. }  
  13.   
  14. var test = {level1:{level2:{level3:'level3'}} };  
  15.   
  16. checkNested(test, 'level1', 'level2', 'level3'); // true  
  17. checkNested(test, 'level1', 'level2', 'foo'); // false  

方法4：

https://github.com/letsgetrandy/brototype

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

方法5：

lodash

JavaScript代码
  1. var object = { 'a': [{ 'b': { 'c': 3 } }] };  
  2.    
  3. _.get(object, 'a[0].b.c');  
  4. // => 3  
  5.    
  6. _.get(object, ['a', '0', 'b', 'c']);  
  7. // => 3  
  8.    
  9. _.get(object, 'a.b.c', 'default');  
  10. // => 'default'  

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(879)