js中如何優(yōu)雅的解析數(shù)據(jù)

legendaryedu 發(fā)布于2019-08-26 11:50 / 1279人閱讀

摘要：自從有了前后端分離，一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來(lái)越混亂了。由于是若類型的語(yǔ)言，所以在使用數(shù)據(jù)的時(shí)候經(jīng)常會(huì)出現(xiàn)這個(gè)幾個(gè)錯(cuò)誤而這些異常很難發(fā)現(xiàn)，及時(shí)發(fā)上線了都不一定能發(fā)現(xiàn)。因?yàn)檫@些問(wèn)題都是由于數(shù)據(jù)異常導(dǎo)致的。

自從有了前后端分離，一些后端小伙伴給出的數(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,難道要這樣寫
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è)試代碼

最后關(guān)于前端異常上報(bào)，這是一個(gè)很大的研究方向，市面上也有一些解決方案，但是真正推廣的我目前沒(méi)發(fā)現(xiàn)。