const user = {
  id: 101,
  email: 'jack@dev.com',
  personalInfo: {
    name: 'Jack',
    address: {
      line1: 'westwish st',
      line2: 'washmasher',
      city: 'wallas',
      state: 'WX'
    }
  }
}

const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;

const user = {
  id: 101,
  email: 'jack@dev.com'
}

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

const name = user && user.personalInfo "htmlcode">

let city;
if (
  data && data.user && data.user.personalInfo &&
  data.user.personalInfo.addressDetails &&
  data.user.personalInfo.addressDetails.primaryAddress
  ) {
  city = data.user.personalInfo.addressDetails.primaryAddress;
}


有一些技巧可以处理这种混乱的对象结构。
Oliver Steele的嵌套对象访问模式


这是我个人的最爱，因为它使代码看起来干净简单。 我从 stackoverflow 中选择了这种风格，一旦你理解它是如何工作的，它就非常吸引人了。


const name = ((user || {}).personalInfo || {}).name;


使用这种表示法，永远不会遇到无法读取未定义的属性“name”。做法是检查用户是否存在，如果不存在，就创建一个空对象，这样，下一个级别的键将始终从存在的对象访问。
不幸的是，你不能使用此技巧访问嵌套数组。
使用数组Reduce访问嵌套对象


Array reduce 方法非常强大，可用于安全地访问嵌套对象。


const getNestedObject = (nestedObj, pathArr) => {
  return pathArr.reduce((obj, key) =>
    (obj && obj[key] !== 'undefined') "color: #ff0000">Typy


如果你认为上面的方法太过非主流，那么可以使用 Typy库。除了安全访问嵌套对象之外，它还可以做很多很棒的事情。
如果使用Typy，代码将如下所示


import t from 'typy';

const name = t(user, 'personalInfo.name').safeObject;
const city = t(user, 'personalInfo.addresses[0].city').safeObject;
// address is an array


这里还有一些其他的库，如 Lodash 和 Ramda，可以做到这一点。但是在轻量级前端项目中，特别是如果你只需要这些库中的一两个方法时，最好选择另一个轻量级库，或者编写自己的库。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。