js中如何完美的解析數(shù)據(jù)
自從有了前后端分離,一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來越混亂了。以為分離減輕了他們的負(fù)擔(dān)接口的質(zhì)量會非常高但是人的惰性卻體現(xiàn)的很“完美”。
由于js是若類型的語言,所以在使用數(shù)據(jù)的時候經(jīng)常會出現(xiàn)這個幾個錯誤
TypeError: Cannot read property 'xxx' of undefined TypeError: Cannot read property 'xxx' of null TypeError: xxx.map is not a function
而這些異常很難發(fā)現(xiàn),及時發(fā)上線了都不一定能發(fā)現(xiàn)。因?yàn)檫@些問題都是由于數(shù)據(jù)異常導(dǎo)致的。如果優(yōu)雅的解決或者說避免這些問題影響到用戶體驗(yàn)?zāi)兀?/p>
// 第一種做法肯定是這樣的
if(a){
return a.name || '你沒名字'
}
// 這種做法處理簡單的還能湊合用,但是如果你遇到這樣的呢 user.country.area.city.name,難道要這樣寫
if(user && user.country && user.country.area && user.country.area.city){
return user.country.area.city.name || '你沒名字'
}
// 這是多么痛苦的一件事情 @后端兄弟
// 第二種,感謝es6
let {country={area:{city:{name:'你沒名字'}}}} = user;
這個感覺也不是很好的解決方案
// 第三種,利用reduce構(gòu)建一個解析函數(shù)
function getValue(obj,key){
return key.split('.').reduce(function(o,k){
// o,當(dāng)前對象
// key,數(shù)組下一個元素
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
[]
代碼測試:https://jsbin.com/zoberem/edit?js,console
最后關(guān)于前端異常上報,這是一個很大的研究方向,市面上也有一些解決方案,但是真正推廣的我目前沒發(fā)現(xiàn)。
相關(guān)文章
js 多種變量定義(對象直接量,數(shù)組直接量和函數(shù)直接量)
js 多種變量定義(對象直接量,數(shù)組直接量和函數(shù)直接量),大家可以參考下,對于以后學(xué)習(xí)js 面向?qū)τ谂cjson操作會有幫助。2010-05-05
JavaScript實(shí)現(xiàn)自定義拖拽排序列表
在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項(xiàng)的順序,本文將介紹如何使用原生JavaScript實(shí)現(xiàn)這一功能,需要的可以了解下2024-01-01
在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
這篇文章主要介紹了在iframe中使bootstrap的模態(tài)框在父頁面彈出問題,解決方法非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-08-08
JavaScrip實(shí)現(xiàn)一個有時間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動過期機(jī)制的時間限制緩存實(shí)現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01

