如何避免嵌套对象中的"未定义"错误

Question

我正在寻找一些好的策略来避免JavaScript中的错误,当使用点符号来调用可能存在或不存在的对象中的子项的子项时.

在下面的代码片段的底部是一个有效的解决方案示例,但是不够优雅(充其量).

很高兴看到一些本机JavaScript解决方案甚至外部库可以帮助避免这种错误.

const object1 = {
  foo: {
    bar: {
      baz: 'payload'
    }
  }
};


const object2 = {};

const array = [object1, object2];

// this will fail on object2 because obj.foo is undefined
array.forEach(obj => {
    if (obj.foo.bar.baz) {
      console.log(obj.foo.bar.baz);
     } else {
      console.log('undefined');
     }
  } 
);

// this will work, but it's horrible to write all those nested if statements.
array.forEach(obj => {
    if (obj) {
      if (obj.foo) {
        if (obj.foo.bar) {
          if (obj.foo.bar.baz) {
          console.log(obj.foo.bar.baz);
          }
        }
      }
    } else {
      console.log('undefinded');
    }
  }
);

Answer 1

Lodash已经为我们做了这件事:https://lodash.com/docs#get

const 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'

Answer 2

不确定这是否足以改进，但是可以使用具有以下条件的单个if语句：

(obj && obj.foo && obj.foo.bar && obj.foo.bar.baz)

这将检查是否obj.foo.bar.baz存在。

(obj && obj.foo && obj.foo.bar && obj.foo.bar.baz)