如何使用Yup验证foo.person.name？解决取值为undefined的问题

你定义的对象本身结构是正确的，正常情况下foo.person.name应该返回"Jon"。出现undefined大概率是后续代码修改了对象，或者访问时存在作用域/变量名问题，可按以下步骤验证：

• 先逐层打印对象，确认结构：
  先打印整个foo对象，看整体结构是否符合预期：console.log(foo)，检查person属性是否存在，以及person内部的name值是否正确。
  再单独打印foo.person：console.log(foo.person)，确认这个子对象没有被改成undefined或其他异常值。

• 排查是否有代码修改了对象：
  检查console.log(foo.person.name)之前的代码，确认有没有对foo、foo.person或foo.person.name做赋值、删除操作，比如foo.person = undefined或者delete foo.person.name这类语句。

• 用可选链安全访问并验证：
  担心中间属性不存在导致问题的话，用可选链操作符访问：console.log(foo?.person?.name)，如果某一层属性不存在，会返回undefined，能帮你快速定位是哪一层出了问题。

• 用条件判断做存在性验证：
  可以写条件语句明确检查各层属性是否存在：

  if (foo && foo.person && typeof foo.person.name !== 'undefined') {
    console.log("name的值为:", foo.person.name);
  } else {
    console.log("name不存在或未定义");
  }
  

内容的提问来源于stack exchange，提问作者Yaraslay Korniyushenko