欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中如何完美的解析數(shù)據(jù)

 更新時間:2018年03月18日 07:51:00   投稿:laozhang  
這篇文章給大家分享了JS中完美解析數(shù)據(jù)的方法和技巧,對此有興趣的朋友可以參考學習下。

自從有了前后端分離,一些后端小伙伴給出的數(shù)據(jù)結構也來越混亂了。以為分離減輕了他們的負擔接口的質量會非常高但是人的惰性卻體現(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ù)異常導致的。如果優(yōu)雅的解決或者說避免這些問題影響到用戶體驗呢?

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

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

代碼測試:https://jsbin.com/zoberem/edit?js,console

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

相關文章

  • JavaScript中的await函數(shù)使用小結

    JavaScript中的await函數(shù)使用小結

    async 函數(shù)是 AsyncFunction 構造函數(shù)的實例,并且其中允許使用 await 關鍵字,async 和 await 關鍵字讓我們可以用一種更簡潔的方式寫出基于 Promise 的異步行為,而無需刻意地鏈式調用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下
    2024-01-01
  • 如何自定義微信小程序tabbar上邊框的顏色

    如何自定義微信小程序tabbar上邊框的顏色

    這篇文章主要介紹了如何自定義微信小程序tabbar上邊框的顏色,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • 如何只用echarts做個仿3d地圖功能

    如何只用echarts做個仿3d地圖功能

    由于業(yè)務需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關于如何只用echarts做個仿3d地圖功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • JavaScript之自定義類型

    JavaScript之自定義類型

    在JavaScript中,創(chuàng)建一個具有自定義屬性和方法的對象有很多種模式,下面一一進行介紹
    2012-05-05
  • JS限制文本框只能輸入數(shù)字和字母方法

    JS限制文本框只能輸入數(shù)字和字母方法

    這篇文章主要介紹了JS限制文本框只能輸入數(shù)字和字母方法,本文給出了限制只能輸入數(shù)字、限制只能輸入字母、限制只能輸入數(shù)字和字母3種腳本,需要的朋友可以參考下
    2015-02-02
  • 原生js的RSA和AES加密解密算法

    原生js的RSA和AES加密解密算法

    這篇文章主要為大家詳細介紹了原生js的RSA和AES加密解密算法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • echarts餅圖labelLine線的長度自適應設置

    echarts餅圖labelLine線的長度自適應設置

    這篇文章主要給大家介紹了關于echarts餅圖labelLine線的長度自適應設置的相關資料,在echarts中,餅圖的標簽線可以通過設置 labelLine屬性來自定義位置,需要的朋友可以參考下
    2023-08-08
  • JS實現(xiàn)自動變化的導航菜單效果代碼

    JS實現(xiàn)自動變化的導航菜單效果代碼

    這篇文章主要介紹了JS實現(xiàn)自動變化的導航菜單效果代碼,涉及JavaScript基于定時函數(shù)觸發(fā)頁面元素屬性動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • 微信小程序骨架屏的應用與實現(xiàn)步驟詳細記錄

    微信小程序骨架屏的應用與實現(xiàn)步驟詳細記錄

    所謂骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結構,直到請求數(shù)據(jù)返回后再渲染頁面,補充進需要顯示的數(shù)據(jù)內容,這篇文章主要給大家介紹了關于微信小程序骨架屏的應用與實現(xiàn)的相關資料,需要的朋友可以參考下
    2022-05-05
  • KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定

    KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定

    Knockout是一個以數(shù)據(jù)模型(data model)為基礎的能夠幫助你創(chuàng)建富文本,響應顯示和編輯用戶界面的JavaScript類庫。這篇文章介紹了KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定的相關知識,感興趣的朋友一起看看吧
    2016-10-10

最新評論