js判断多级属性值是否存在

Question

现在有个对象

a:{
    b:{
        d:1
    }
}

我用 let x=a.b.d 能取到，但我取一个不存在的属性，比如 let x=a.e.f 就会报错
我现在能想到的是用if(typeof a!==='undefined'&&typeof a.e!==='undefined'&&typeof a.e.f!==='undefined')判断但很麻烦
有什么办法能直接判断a.e.f这种多级属性存不存在？

Answer 1

Optional Chaining：

let x = a?.e?.f;

// 等效于
let x = (a !== null && a !== undefined) && (a.e !== null && a.e !== undefined) && a.e.f;

目前浏览器支持度不够，还需配合 Babel 使用。

Answer 2

除了楼上办法，还可以自定义工具函数

//根据字符串路径获取对象属性 : 'dcjgs[0].count'
function getPropByPath(obj, path) {
  let tempObj = obj;
  path = path.replace(/\[(\w+)\]/g, '.$1');
  path = path.replace(/^\./, '');

  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      break;
    }
  }
  return tempObj ? tempObj[keyArr[i]] : null
};

getPropByPath(a, 'b.d')  //1
getPropByPath(a, 'b.c')  //undefined
getPropByPath(a, 'e.f')  //undefined

还可以让getPropByPath(a, 'e.f')输出为null，表示没找到某个key

Answer 3

虽然这种也不优雅，但至少比你现在的写法好

a && a.e && a.e.f

或者是 Optional Chaining ，但兼容性是个大问题。不过 TypeScript 支持，所以还是转 Ts 吧

a?.e?.f

Answer 4

我用 ramda 的 lens