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

xiaoqibTn 發(fā)布于2019-08-26 10:29 / 1459人閱讀

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

Uncaught TypeError: Cannot read property "foo" of undefined.這種錯(cuò)誤想必在我們?nèi)粘ｉ_發(fā)中都到過，這有可能是我們的api返回了一個(gè)空的狀態(tài)而我們沒有預(yù)料到，也可能是其他，我們無從得知，因?yàn)檫@種問題十分的常見且涉及的因素相當(dāng)多。

我最近遇到了一個(gè)問題，某些環(huán)境變量由于某種原因沒有被引入，導(dǎo)致各種各樣的問題，一堆錯(cuò)誤出現(xiàn)在我的眼前。無論原因是什么，它可能是一個(gè)災(zāi)難性的錯(cuò)誤，那么我們?nèi)绾尾拍苁紫确乐顾兀?/p>

讓我們來看看解決辦法。

工具庫

如果你已經(jīng)使用了某種工具庫，很可能內(nèi)部就包含了相關(guān)的錯(cuò)誤處理函數(shù)。比如lodash的_.get，Ramda的R.path提供訪問安全對象的支持。

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

使用&&實(shí)現(xiàn)「短路與」

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

&&中，如果第一個(gè)表達(dá)式為false則直接返回，否則就用第二個(gè)。舉個(gè)例子：0&&1 -> 0，2&&3 -> 3。如果是鏈?zhǔn)绞褂?b>&&的話，將會(huì)判斷第一個(gè)假值或者最后一個(gè)真值。比如：1 && 2 && 3 && null && 4? -> null，1 && 2 && 3 -> 3。

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

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

在上面代碼中，因?yàn)?b>&&遇到了false值，destroyAllHumans將永遠(yuǎn)不會(huì)被執(zhí)行。

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

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

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

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中進(jìn)行更詳細(xì)地介紹。我將在這里作一個(gè)簡單的解釋。

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

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

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

try/catch

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

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

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

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

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

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

如果訪問該屬性的任何嘗試失敗，則會(huì)導(dǎo)致所有這些嘗試都回退到其默認(rèn)值。

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

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"

未完待續(xù)...

云服務(wù)器 GPU云服務(wù)器 cannot Docker出現(xiàn)Cannot 解決php中Cannot OFS

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106244.html

發(fā)表評論

登陸后可評論

0條評論

xiaoqibTn

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow的版本

閱讀 2160·2023-04-25 18:49
vue 中echart折線自適應(yīng)

閱讀 1872·2019-08-30 14:02
簡單的選項(xiàng)卡切換效果

閱讀 2676·2019-08-29 17:24
body標(biāo)簽子級被默認(rèn)client width截?cái)嗟慕鉀Q方法

閱讀 3349·2019-08-28 18:10
CSS Grid布局：什么是網(wǎng)格布局

閱讀 2956·2019-08-28 18:03
太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級阿里P6+的技術(shù)功底？

閱讀 516·2019-08-26 12:01
2017年 JavaScript 框架回顧 -- 后端框架

閱讀 3342·2019-08-26 11:31
【譯】教你如何避開「Cannot read property of undefined」

閱讀 1460·2019-08-26 10:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

詳解1000+項(xiàng)目數(shù)據(jù)分析出來的10大JavaScript錯(cuò)誤

**避免取值時(shí)出現(xiàn)Cannot read property 'xx' of unde**

JavaScript 調(diào)試常見報(bào)錯(cuò)以及修復(fù)方法

貓頭鷹的深夜翻譯：從1000+JS項(xiàng)目中匯總的10個(gè)最容易出現(xiàn)的錯(cuò)誤(以及如何解決)

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

發(fā)表評論

0條評論

xiaoqibTn

男|高級講師

TA的文章

tensorflow的版本

vue 中echart折線自適應(yīng)

簡單的選項(xiàng)卡切換效果

body標(biāo)簽子級被默認(rèn)client width截?cái)嗟慕鉀Q方法

CSS Grid布局：什么是網(wǎng)格布局

太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級阿里P6+的技術(shù)功底？

2017年 JavaScript 框架回顧 -- 后端框架