Question

我总是遇到这样的情况，我需要先检查某个特定属性的存在，然后再进行处理，例如：

{
   this.state.list && this.state.list.map(element => ... )
}

当需要生成数据列表时，ReactJS中经常使用这种检查：

this.foo.bar.baz.qux

但是，如果目标属性嵌套在四层或五层内部，如：

if(this.foo && this.foo.bar && this.foo.bar.baz && this.foo.bar.baz.qux){
   // do something with `this.foo.bar.baz.qux`
}

检查过程将非常冗长：

qux

我知道检查的主要目的是确保我们不会收到错误：

无法读取 undefined （或 null ）的属性 qux

还有另一种方法吗？我正在寻找一种更短的方法，例如：

this.foo在{{1}}

任何想法都会受到赞赏。

谢谢。

Answer 1

不需要库，您可以创建一个简单的函数，可以将对象和属性列表传递给该函数，如果存在，则将返回嵌套值，或者返回undefined：

const getProps = (obj, props) => (
  props.reduce((a, prop) => a !== undefined ? a[prop] : undefined, obj)
);

const obj1 = {
  foo: {
    bar: {
      baz: {
        buzz: {
          value: 'thevalue'
        }
      }
    }
  }
};
const obj2 = {
  foo: {
    bar: {
    }
  }
};
console.log(getProps(obj1, ['foo', 'bar', 'baz', 'buzz', 'value']));
console.log(getProps(obj2, ['foo', 'bar', 'baz', 'buzz', 'value']));

还有一个proposal用于可选链接，目前处于阶段1。为达到上述效果而建议的语法是：

obj?.foo?.bar?.baz?.buzz?.value

，如果嵌套的属性值存在，它将评估为嵌套的属性值，否则为undefined。

检查属性是否存在的最有效方法

1 个答案: