在JavaScript中如何访问暂未存在的嵌套对象

前言

javascript 是个很神奇的东西。但是 javascript中的一些东西确实很奇怪，让人摸不着头脑。其中之一就是当你试图访问嵌套对象时，会遇到这个错误

cannot read property 'foo' of undefined

在大多数情况下，处理嵌套的对象，通常我们需要安全地访问最内层嵌套的值。 来个粟子：

const user = {
  id: 101,
  email: '[e-mail]',
  personalinfo: {
    name: 'jack',
    address: {
      line1: 'westwish st',
      line2: 'washmasher',
      city: 'wallas',
      state: 'wx'
    }
  }
}

当我们要访问user里面的name及city时，我们会这样写。

const name = user.personalinfo.name;
const usercity = user.personalinfo.address.city;

这是简单而直接的。

但是，由于某种原因，user 中的 personal不可用，对象结构将是这样的：

const user = {
  id: 101,
  email: '[e-mail]'
}

现在，如果你在试着访问 name ，将会得到一个 cannot read property 'name' of undefined 的错误。

const name = user.personalinfo.name; // cannot read property 'name' of undefined

这是因为我们试图访问对象中不在的 key 为 name 的属性。

大多数开发人员处理这种情况的常用方法如下，

const name = user && user.personalinfo ? user.personalinfo.name : null;

如果你的嵌套结构很简单，这是可以的，但是如果数据嵌套五或六层深，那么你的代码就会看起很混乱：

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的嵌套对象访问模式

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

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

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

不幸的是，你不能使用此技巧访问嵌套数组。

使用数组reduce访问嵌套对象

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

const getnestedobject = (nestedobj, patharr) => {
  return patharr.reduce((obj, key) =>
    (obj && obj[key] !== 'undefined') ? obj[key] : null, nestedobj);
}

// 将对象结构作为数组元素传入
const name = getnestedobject(user, ['personalinfo', 'name']);

// 要访问嵌套数组，只需将数组索引作为数组元素传入。.
const city = getnestedobject(user, ['personalinfo', 'addresses', 0, 'city']);
// 这将从 addresses 中的第一层返回 city

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，可以做到这一点。但是在轻量级前端项目中，特别是如果你只需要这些库中的一两个方法时，最好选择另一个轻量级库，或者编写自己的库。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。