快捷導(dǎo)航

在JavaScript中如何訪問暫未存在的嵌套對象

更新時間：2019年06月18日 08:58:32 作者：前端小智

這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問暫未存在的嵌套對象的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

JavaScript 是個很神奇的東西。但是 JavaScript中的一些東西確實很奇怪，讓人摸不著頭腦。其中之一就是當(dāng)你試圖訪問嵌套對象時，會遇到這個錯誤

Cannot read property 'foo' of undefined

在大多數(shù)情況下，處理嵌套的對象，通常我們需要安全地訪問最內(nèi)層嵌套的值。來個粟子：

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

當(dāng)我們要訪問user里面的name及city時，我們會這樣寫。

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

這是簡單而直接的。

但是，由于某種原因，user 中的 personal不可用，對象結(jié)構(gòu)將是這樣的：

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

現(xiàn)在，如果你在試著訪問 name ，將會得到一個 Cannot read property 'name' of undefined 的錯誤。

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

這是因為我們試圖訪問對象中不在的 key 為 name 的屬性。

大多數(shù)開發(fā)人員處理這種情況的常用方法如下，

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

如果你的嵌套結(jié)構(gòu)很簡單，這是可以的，但是如果數(shù)據(jù)嵌套五或六層深，那么你的代碼就會看起很混亂：

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

有一些技巧可以處理這種混亂的對象結(jié)構(gòu)。

Oliver Steele的嵌套對象訪問模式

這是我個人的最愛，因為它使代碼看起來干凈簡單。我從 stackoverflow 中選擇了這種風(fēng)格，一旦你理解它是如何工作的，它就非常吸引人了。

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

使用這種表示法，永遠不會遇到無法讀取未定義的屬性“name”。做法是檢查用戶是否存在，如果不存在，就創(chuàng)建一個空對象，這樣，下一個級別的鍵將始終從存在的對象訪問。

不幸的是，你不能使用此技巧訪問嵌套數(shù)組。

使用數(shù)組Reduce訪問嵌套對象

Array reduce 方法非常強大，可用于安全地訪問嵌套對象。

const getNestedObject = (nestedObj, pathArr) => {
  return pathArr.reduce((obj, key) =>
    (obj && obj[key] !== 'undefined') ? obj[key] : null, nestedObj);
}

// 將對象結(jié)構(gòu)作為數(shù)組元素傳入
const name = getNestedObject(user, ['personalInfo', 'name']);

// 要訪問嵌套數(shù)組，只需將數(shù)組索引作為數(shù)組元素傳入。.
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，可以做到這一點。但是在輕量級前端項目中，特別是如果你只需要這些庫中的一兩個方法時，最好選擇另一個輕量級庫，或者編寫自己的庫。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: