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

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

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13

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

 

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

 

 

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

 

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

 

 

1 2 3 4

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

 

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

 

 

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

 

这是因为我们试图访问对象中不在的 key 为  name  的属性。 大多数开发人员处理这种情况的常用方法如下，

 

 

1	const name = user && user.personalInfo ? user.personalInfo.name : null;

 

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

 

 

1 2 3 4 5 6 7 8

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 中选择了这种风格，一旦你理解它是如何工作的，它就非常吸引人了。

 

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

 

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

 

使用数组Reduce访问嵌套对象

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

 

1 2 3 4 5 6 7 8 9 10 11

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 ，代码将如下所示：

 

1 2 3 4 5

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