【譯】教你如何避開「Cannot read property of undefined」

xiaoqibTn 發布于2019-08-26 10:29 / 1408人閱讀

摘要：比如的，的提供訪問安全對象的支持。在使用的情況下，這意味著表達式在達到其第一個假值后將停止向后執行。這便可用于安全地訪問嵌套屬性。與上述短路示例類似，此方法通過檢查值是否為假來進行操作。該方法優于該方法的地方是避免屬性名稱的重復。

Uncaught TypeError: Cannot read property "foo" of undefined.這種錯誤想必在我們日常開發中都到過，這有可能是我們的api返回了一個空的狀態而我們沒有預料到，也可能是其他，我們無從得知，因為這種問題十分的常見且涉及的因素相當多。

我最近遇到了一個問題，某些環境變量由于某種原因沒有被引入，導致各種各樣的問題，一堆錯誤出現在我的眼前。無論原因是什么，它可能是一個災難性的錯誤，那么我們如何才能首先防止它呢？

讓我們來看看解決辦法。

工具庫

如果你已經使用了某種工具庫，很可能內部就包含了相關的錯誤處理函數。比如lodash的_.get，Ramda的R.path提供訪問安全對象的支持。

如果沒有使用呢？那就看看下面的解決辦法。

使用&&實現「短路與」

在Javascript中一個有趣的事情是，邏輯運算操作不一定返回boolean值。根據規范，&&和||運算符返回的值不一定需要為boolean類型，它的返回值為該運算符左右兩邊表達式的其中一個。

&&中，如果第一個表達式為false則直接返回，否則就用第二個。舉個例子：0&&1 -> 0，2&&3 -> 3。如果是鏈式使用&&的話，將會判斷第一個假值或者最后一個真值。比如：1 && 2 && 3 && null && 4? -> null，1 && 2 && 3 -> 3。

這對安全地訪問嵌套對象屬性有什么作用呢？JavaScript中的邏輯運算符將「短路」。在使用&&的情況下，這意味著表達式在達到其第一個假值后將停止向后執行。

??const foo = false && destroyAllHumans();
??console.log(foo); // false, and humanity is safe

在上面代碼中，因為&&遇到了false值，destroyAllHumans將永遠不會被執行。

這便可用于安全地訪問嵌套屬性。

const meals = {
??  breakfast: null, // I skipped the most important meal of the day! :(
??  lunch: {
??    protein: "Chicken",
??    greens: "Spinach",
??  },
??  dinner: {
??    protein: "Soy",
??    greens: "Kale",
??  },
??};
??
??const breakfastProtein = meals.breakfast && meals.breakfast.protein; // null
??const lunchProtein = meals.lunch && meals.lunch.protein; // "Chicken

這種辦法不僅簡單，而且在處理短鏈時也非常的簡潔。但是當訪問更深層的對象時，這可能就會變得非常冗長。

const favorites = {
??  video: {
??    movies: ["Casablanca", "Citizen Kane", "Gone With The Wind"],
??    shows: ["The Simpsons", "Arrested Development"],
??    vlogs: null,
??  },
??  audio: {
??    podcasts: ["Shop Talk Show", "CodePen Radio"],
??    audiobooks: null,
??  },
??  reading: null, // Just kidding -- I love to read
??};
??
??const favoriteMovie = favorites.video && favorites.video.movies && favorites.video.movies[0];
??// Casablanca
??const favoriteVlog = favorites.video && favorites.video.vlogs && favorites.video.vlogs[0];
??// null

嵌套的對象越深，它就越難以描述。

Maybe Monad

Oliver Steele提出了這種方法，并在他的博客文章Monads on the Cheap I：The Maybe Monad中進行更詳細地介紹。我將在這里作一個簡單的解釋。

const favoriteBook = ((favorites.reading||{}).books||[])[0]; // undefined
??const favoriteAudiobook = ((favorites.audio||{}).audiobooks||[])[0]; // undefined
??const favoritePodcast = ((favorites.audio||{}).podcasts||[])[0]; // "Shop Talk Show"

與上述短路示例類似，此方法通過檢查值是否為假來進行操作。如果是，它將嘗試訪問空對象上的下一個屬性。在上面的例子中，favorites.reading為null，所以books從一個空對象進行訪問。而此時的返回值也將是undefined，于是[0]將從一個空數組中獲取。

該方法優于該&&方法的地方是避免屬性名稱的重復。在更深層的對象上，這可能是一個非常重要的優勢。主要的缺點是可讀性較差。它不是一種常見的模式，可能需要讀者花一點時間來解析它是如何工作的。

try/catch

在JavaScript中??try...catch語句允許某函數安全地訪問屬性。

try {
??  console.log(favorites.reading.magazines[0]);
??} catch (error) {
??  console.log("No magazines have been favorited.");
??}

但問題在于，??try...catch不是一個表達式，在某些語言中它不具備直接返回值的能力，一種可行的方法是直接在try...catch定義變量。

let favoriteMagazine;
??try { 
??  favoriteMagazine = favorites.reading.magazines[0]; 
??} catch (error) { 
??  favoriteMagazine = null; /* any default can be used */
??};

即使要寫不少的代碼，但其實你也只能定義一個變量，但如果同時定義多個話，就會有問題。

let favoriteMagazine, favoriteMovie, favoriteShow;
??try {
??  favoriteMovie = favorites.video.movies[0];
??  favoriteShow = favorites.video.shows[0];
??  favoriteMagazine = favorites.reading.magazines[0];
??} catch (error) {
??  favoriteMagazine = null;
??  favoriteMovie = null;
??  favoriteShow = null;
??};
??
??console.log(favoriteMovie); // null
??console.log(favoriteShow); // null
??console.log(favoriteMagazine); // null

如果訪問該屬性的任何嘗試失敗，則會導致所有這些嘗試都回退到其默認值。

另一種方法是將try...catch可重用的實用程序函數包裝起來。

const tryFn = (fn, fallback = null) => {
??  try {
??    return fn();
??  } catch (error) {
??    return fallback;
??  }
??} 
??
??const favoriteBook = tryFn(() => favorites.reading.book[0]); // null
??const favoriteMovie = tryFn(() => favorites.video.movies[0]); // "Casablanca"

未完待續...

云服務器 GPU云服務器 cannot Docker出現Cannot 解決php中Cannot OFS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106244.html

詳解1000+項目數據分析出來的10大JavaScript錯誤

摘要：當未捕獲的錯誤通過處理程序引發的錯誤，而不是捕獲在中被瀏覽器的跨域策略限制時，會產生這類的腳本錯誤。例如，如果您將您的代碼托管在上，則任何未被捕獲的錯誤將被報告為腳本錯誤而不是包含有用的堆棧信息。譯者按： null/undefined引發的錯誤在10大錯誤中比例很高。而它們很可能導致嚴重問題，所以要重視起來。原文: Top 10 JavaScript errors from 10...

jubincn 2019-08-22 15:40 評論0 收藏0
避免取值時出現Cannot read property 'xx' of unde

摘要：由于是以空函數為代理對象，我們可以將執行它，觸發。中會遍歷數組依次取值，如果發現無法繼續取值則，跳出循環。本文來自我的博客，歡迎大家去GitHub上star我的博客我們在取值特別是鏈式取值的時候，常常會遇到Cannot read property xx of undefined的錯誤，如何避免這種情況的發生呢？這里有幾種方法以供參考使用成熟的庫方法這是最簡單的一種手段：只用引入...

fantix 2019-08-23 15:23 評論0 收藏0
JavaScript 調試常見報錯以及修復方法

摘要：表示錯誤沒有被語句捕獲，是錯誤的名字。如何修復錯誤確保方法名正確。這個錯誤的行號將指出正確的位置。相關錯誤代碼調用的方法在當前狀態無法調用。通常由引起，在方法準備完畢之前調用它會引起錯誤。原文翻譯出處涂鴉碼農錯誤以及如何修復（看到一篇調試JS很有用的文章，收藏一下） JavaScript 調試是一場噩夢：首先給出的錯誤非常難以理解，其次給出的行號不總有幫助。有個查找錯誤含義，及修復...

zhongmeizhi 2019-08-21 10:25 評論0 收藏0
貓頭鷹的深夜翻譯：從1000+JS項目中匯總的10個最容易出現的錯誤(以及如何解決)

摘要：常出現的錯誤前十位為了可讀性，錯誤名稱進行了一定的簡寫。讓我們深入了解每個錯誤發生的原因以及解決方法。這個問題很容易解決。當未捕獲的錯誤跨越違法跨域策略的域邊界時，會發生腳本錯誤。這是當你在中試圖調用的方法時出現的錯誤。 JavaScript常出現的錯誤前十位 showImg(https://segmentfault.com/img/bV3Z1z?w=1116&h=691); 為了可讀...

eccozhou 2019-08-26 11:46 評論0 收藏0
如何在JavaScript中訪問暫未存在的嵌套對象

摘要：做法是檢查用戶是否存在，如果不存在，就創建一個空對象，這樣，下一個級別的鍵將始終從存在的對象訪問。使用數組訪問嵌套對象方法非常強大，可用于安全地訪問嵌套對象。除了安全訪問嵌套對象之外，它還可以做很多很棒的事情。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ JavaScript 是個很神奇的東西。但是 JavaScript中的一些東西確實很奇怪，讓人摸不著頭腦。...

malakashi 2019-08-23 18:10 評論0 收藏0