js中如何完美的解析數(shù)據(jù)
自從有了前后端分離,一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來(lái)越混亂了。以為分離減輕了他們的負(fù)擔(dān)接口的質(zhì)量會(huì)非常高但是人的惰性卻體現(xiàn)的很“完美”。
由于js是若類型的語(yǔ)言,所以在使用數(shù)據(jù)的時(shí)候經(jīng)常會(huì)出現(xiàn)這個(gè)幾個(gè)錯(cuò)誤
TypeError: Cannot read property 'xxx' of undefined TypeError: Cannot read property 'xxx' of null TypeError: xxx.map is not a function
而這些異常很難發(fā)現(xiàn),及時(shí)發(fā)上線了都不一定能發(fā)現(xiàn)。因?yàn)檫@些問(wèn)題都是由于數(shù)據(jù)異常導(dǎo)致的。如果優(yōu)雅的解決或者說(shuō)避免這些問(wèn)題影響到用戶體驗(yàn)?zāi)兀?/p>
// 第一種做法肯定是這樣的 if(a){ return a.name || '你沒(méi)名字' } // 這種做法處理簡(jiǎn)單的還能湊合用,但是如果你遇到這樣的呢 user.country.area.city.name,難道要這樣寫(xiě) if(user && user.country && user.country.area && user.country.area.city){ return user.country.area.city.name || '你沒(méi)名字' } // 這是多么痛苦的一件事情 @后端兄弟 // 第二種,感謝es6 let {country={area:{city:{name:'你沒(méi)名字'}}}} = user; 這個(gè)感覺(jué)也不是很好的解決方案 // 第三種,利用reduce構(gòu)建一個(gè)解析函數(shù) function getValue(obj,key){ return key.split('.').reduce(function(o,k){ // o,當(dāng)前對(duì)象 // key,數(shù)組下一個(gè)元素 if((typeof o === 'undefined' || o === null)){ return k.indexOf('[array]') !== -1?[]:o }else{ return k.indexOf('[array]') !== -1?(o[k.replace('[array]','')]||[]):o[k] } },obj) } let user1; let user2 = { } let user3 = { country:{ area:{ city:{ name:'12312' } } } } let user4 = { country:[ { city:{ name:'12312' } } ] } let user5 = { country:{ city:[1,2,3] } } console.log(getValue(user1,'country.area.city.name')) console.log(getValue(user2,'country.area.city.name')) console.log(getValue(user3,'country.area.city.name')) console.log(getValue(user5,'country.city[array]')) console.log(getValue(user5,'country.city[array].1')) console.log(getValue(user5,'country.city[array].10')) console.log(getValue(user5,'country.city[array].1.name')) console.log(getValue(user5,'country.city[array].persion[array]')) // 輸出結(jié)果 undefined undefined "12312" [1, 2, 3] 2 undefined undefined []
代碼測(cè)試:https://jsbin.com/zoberem/edit?js,console
最后關(guān)于前端異常上報(bào),這是一個(gè)很大的研究方向,市面上也有一些解決方案,但是真正推廣的我目前沒(méi)發(fā)現(xiàn)。
相關(guān)文章
JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實(shí)例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫(xiě)出基于 Promise 的異步行為,而無(wú)需刻意地鏈?zhǔn)秸{(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01echarts餅圖labelLine線的長(zhǎng)度自適應(yīng)設(shè)置
這篇文章主要給大家介紹了關(guān)于echarts餅圖labelLine線的長(zhǎng)度自適應(yīng)設(shè)置的相關(guān)資料,在echarts中,餅圖的標(biāo)簽線可以通過(guò)設(shè)置 labelLine屬性來(lái)自定義位置,需要的朋友可以參考下2023-08-08JS實(shí)現(xiàn)自動(dòng)變化的導(dǎo)航菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)變化的導(dǎo)航菜單效果代碼,涉及JavaScript基于定時(shí)函數(shù)觸發(fā)頁(yè)面元素屬性動(dòng)態(tài)變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)步驟詳細(xì)記錄
所謂骨架屏就是在頁(yè)面數(shù)據(jù)尚未加載前先給用戶展示出頁(yè)面的大致結(jié)構(gòu),直到請(qǐng)求數(shù)據(jù)返回后再渲染頁(yè)面,補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容,這篇文章主要給大家介紹了關(guān)于微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-05-05KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定
Knockout是一個(gè)以數(shù)據(jù)模型(data model)為基礎(chǔ)的能夠幫助你創(chuàng)建富文本,響應(yīng)顯示和編輯用戶界面的JavaScript類庫(kù)。這篇文章介紹了KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定的相關(guān)知識(shí),感興趣的朋友一起看看吧2016-10-10