【问题标题】：how to check a deeply nested object is undefined? [duplicate]如何检查深度嵌套的对象未定义？ [复制]
【发布时间】：2020-03-26 08:00:17
【问题描述】：

我想检查一个对象是否未定义

this.state.data.value[0].name

我尝试了以下这些会说 Type error this.state.data.value is undefined in the console。

if(typeof this.data.value[0].name=== "undefined"){
//do something
}

if(this.data.value[0].name == undefined){
//do something
}

if(!!this.data.value[0].name){
//do something
}

if(!this.data.value[0].name){
//do something
}

if(this.data){
  if(this.data.value){ // It says type error, this.state.value is undefined in the console.
    }
}

如何检查对象 this.state.value[0].name 是否未定义？

我试过了

 if (typeof (this.data) !== undefined) {
      debugger;
      if (typeof (this.data.value) !== undefined) {
        debugger;

        if (typeof (this.data.value[0].name != undefined)) {//cannot read value [0]
          debugger;


        }
      }
    }

我的解决方案，感谢pranav-c-balan

  if (this.data && this.data.value && this.data.value[0] && this.data.value[0].name) {
      return true;
    } else {
      document.getElementById("myDIV").innerHTML =
        "<b>Custom Error Text</b>";
      return false;

    }

一个有效的例子

   let data={};
    data.value=[{name:123}];

    function checkValue(){
      if(data && data.value && data.value[0] && data.value[0].name){
        return true;
      }else{
         return false;
      }
     }
     let correct=checkValue();
     
       if(correct){
          console.log("This is valid, data.value[0].name Exist");
          }else{
          console.log("This is invalid,data.value[0].name do not Exist");

          }

  function checkValue2(){
      if(data && data.value && data.value[0] && data.value[0].names){
        return true;
      }else{
         return false;
      }
     }

let correct2=checkValue2();
 if(correct2){
          console.log("This is valid, data.value[0].names Exist");
          }else{
          console.log("This is invalid,data.value[0].names do not Exist");

          }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.0/react-dom.min.js"></script>

【问题讨论】：

this.state.data.value &&
@VLAZ，不，因为您向它展示了一层对象的示例，但我想检查一个嵌套对象 this.state.value[0].name 它可能是 this.state。值存在但没有 .name 属性，那么我想要这个 if 语句来捕捉它并做一些事情。尽管如此，当我写 this.state.value 时，控制台已经抛出一个错误，说 this.state.value 是未定义的
@PranavCBalan 我试过 if (!this.data && !this.data.value && !this.data.value[0] && !this.data.value[0].name) { / / if 语句没有被评估
@RandomI.T !this.data 表示只有falsy才会进入，所以如果this.data存在则跳过。删除 NOT。
@PranavCBalan，我喜欢你的想法，它简单而且有效！！！！

标签： javascript object undefined

【解决方案1】：

您可以使用optional chaining (?.) 来检查您的对象。

这将检查链的每个部分。如果state 中的data 未定义，则返回undefined，但抛出错误除外。

let state = {
  data: {
    value: [
      {name: 'value'}
    ]
  }
}

console.log(typeof state?.data?.value?.[0]?.name);
console.log(typeof state?.data?.value?.[1]?.name);
console.log(typeof state?.datum?.value?.[0]?.name); // In this case it returns 'undefined' for dutum stage.

注意

到目前为止，可选链对浏览器的支持很差。因此，您必须使用Babel 或任何其他 Javascript 编译器来支持浏览器。

【讨论】：

该标准尚未最终确定。支持也不是广泛可用的。为此，您需要使用 Babel。 TypeScript 也允许这样做。
是的，你必须使用 Babel 来支持。但是当您使用 React 时，我希望 babel 配置良好。 :)
不使用 React 的人也可以看到这篇文章。事实上，OP 是极少数会看到这篇文章的人 - 那将是一个单一的观点，阅读这篇文章的其他所有人都是 not OP 并且可能有也可能没有 React 或 Babel 可用.请记住，帖子不适合个人 - 它们适合所有人。
我明白你的意思@VLAZ。谢谢你的建议。我在回答中提到了这一点。
感谢您的回复，它说语法错误我无法使用 gulp bundle 编译

【解决方案2】：

只需使用相同的 typeof 运算符：

if(typeof(this.state) != 'undefined'){
  if(typeof(this.state.value) != 'undefined') { 
        // next source
    }
}

【讨论】：

typeof 不是函数，而是运算符。
我试过这个，它说 this.data.value 是未定义的