国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js中如何優雅的解析數據

legendaryedu / 1289人閱讀

摘要：自從有了前后端分離，一些后端小伙伴給出的數據結構也來越混亂了。由于是若類型的語言，所以在使用數據的時候經常會出現這個幾個錯誤而這些異常很難發現，及時發上線了都不一定能發現。因為這些問題都是由于數據異常導致的。

自從有了前后端分離，一些后端小伙伴給出的數據結構也來越混亂了。以為分離減輕了他們的負擔接口的質量會非常高但是人的惰性卻體現的很“完美”。
由于js是若類型的語言，所以在使用數據的時候經常會出現這個幾個錯誤

TypeError: Cannot read property "xxx" of undefined
TypeError: Cannot read property "xxx" of null
TypeError: xxx.map is not a function

而這些異常很難發現，及時發上線了都不一定能發現。因為這些問題都是由于數據異常導致的。如果優雅的解決或者說避免這些問題影響到用戶體驗呢？

// 第一種做法肯定是這樣的
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構建一個解析函數
function getValue(obj,key){
    return key.split(".").reduce(function(o,k){
        // o,當前對象
        // key，數組下一個元素
        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]"))

// 輸出結果
undefined
undefined
"12312"
[1, 2, 3]
2
undefined
undefined
[]

測試代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107655.html

相關文章

  • 【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

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

    JeOam 評論0 收藏0

  • 【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

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

    hqman 評論0 收藏0

  • 如何優雅地查看 JS 錯誤堆棧？

    摘要：摘要堆棧是的關鍵。假設捕獲了一個異常，上報的堆棧是這個這個堆棧，你看得出問題來嗎我們發布到的腳本文件，普遍是經過壓縮的，所以堆棧可讀性相當的差。假如有下面的一個堆棧查看工具，又如何眼尖的同學，一眼就能找到問題。 摘要： 堆棧是Debug的關鍵。 原文：如何優雅地查看 JS 錯誤堆棧？ 作者：小芭樂 Fundebug經授權轉載，版權歸原作者所有。 在前端，我們經常會通過 wind...

    megatron 評論0 收藏0

  • 在Typescript項目中，如何優雅的使用ESLint和Prettier

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

    chemzqm 評論0 收藏0

  • 在Typescript項目中，如何優雅的使用ESLint和Prettier

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

    WilsonLiu95 評論0 收藏0

發表評論

0條評論

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