谈谈Javascript中的路径取值

js由于其脚本语言的特性 没有Model定义某项数据源具有哪些属性
在取超过两级的值的时候如果一级对象为null或者其他非对象值 经常会导致没有该xxx属性的报错(在Vue React中经常遇到)
有些数据是需要请求的 预定义(声明)的时候可能是个空对象 在编写模版的时候可能直接就 <<a.b.c>> 这样写上去 但是这时候Vue就会报错 说 c 不是 b 的属性
于是就有这样的写法 <<a && a.b && a.b.c>> 可以通过预定义阶段就写到这一层来解决这个报错 (由于Hexo模版解析限制 < == {, > == })
但是如果你是定义了最外层 这时候需要这样的形式去取值
如果有一个对象数据结构是这样的

var a = {b: 1};

我需要取 a.b 那我应该怎样写才是最保险的呢?
众所周知 所有逻辑运算符中 && 是只有当前一个条件满足 才会继续执行下一个判断的 这时候就用上了这个

var b = a && a.b;
// 或者
var b = a && a['b'];

那等级一深不是要抓狂吗? 二级已经如此, 更别说三级以上的值了
假如数据结构是这样的

var a = {
  b: {
    c:{
      d:{
        e: 1
      }
    }
  }
};

我要拿到最后那个 e ? (只声明了 a = {} 的时候)

var e = a && a.b && a.b.c && a.b.c.e;

如果能够传一个路径 (b.c.d.e) 就拿到 而且不会出错或者抛出异常 该多好啊
我在写后台管理系统通用解决方案的的时候就遇到了这个问题
一个字段对应显示的值, 可能是1级的,2级的,甚至N级, 而此时因为是通用解决方案只能通过路径来取值,不打算用eval或其他奇怪的实现方式(不利于不会Javascript的用户使用)
即实现一个传入 原值+目标路径 的方法来取值
代码如下

敲黑板

var getValueByPath = function (data, path) {
  if (!path) return;
  var targets = path.split('.');
  var currentData = data;
  for (var i = 0; i < targets.length; i++) {
    if (!currentData) break;
    currentData = currentData[targets[i]]
  }
  return currentData
}

正常调用

var e = getValueByPath(a, 'b.c.d.e');
console.log(e); // 1

尝试一个不存在的路径

var e = getValueByPath(a, 'b.c.d.e.f');
console.log(e); // undefined

至此路径取值法便完成了

广告时间

安利一波我自己写的工具 设计结构 + 编写模版 = 生成CMS代码 + 通用API
ModelMakerPro