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

資訊專欄INFORMATION COLUMN

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

legendaryedu / 1288人閱讀

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

自從有了前后端分離，一些后端小伙伴給出的數(shù)據(jù)結(jié)構(gòu)也來越混亂了。以為分離減輕了他們的負擔(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)。因為這些問題都是由于數(shù)據(jù)異常導(dǎo)致的。如果優(yōu)雅的解決或者說避免這些問題影響到用戶體驗?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
[]

測試代碼

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

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

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

相關(guān)文章

  • 【JS實用技巧】優(yōu)化動態(tài)創(chuàng)建元素的方式，讓代碼更加優(yōu)雅且利于維護

    摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要動態(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護呢？接下來我們通過研究一些實例...

    JeOam 評論0 收藏0

  • 【JS實用技巧】優(yōu)化動態(tài)創(chuàng)建元素的方式，讓代碼更加優(yōu)雅且利于維護

    摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要動態(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護呢？接下來我們通過研究一些實例...

    hqman 評論0 收藏0

  • 如何優(yōu)雅地查看 JS 錯誤堆棧？

    摘要：摘要堆棧是的關(guān)鍵。假設(shè)捕獲了一個異常，上報的堆棧是這個這個堆棧，你看得出問題來嗎我們發(fā)布到的腳本文件，普遍是經(jīng)過壓縮的，所以堆?？勺x性相當(dāng)?shù)牟?。假如有下面的一個堆棧查看工具，又如何眼尖的同學(xué)，一眼就能找到問題。 摘要： 堆棧是Debug的關(guān)鍵。 原文：如何優(yōu)雅地查看 JS 錯誤堆棧？ 作者：小芭樂 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 在前端，我們經(jīng)常會通過 wind...

    megatron 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對于項目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    chemzqm 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對于項目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    WilsonLiu95 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<