Zusammenfassung der Fähigkeiten zum Parsen von JS-Daten

Dieses Mal werde ich Ihnen eine Zusammenfassung der Fähigkeiten zum Parsen von JS-Daten geben. Was sind die Vorsichtsmaßnahmen für das Parsen von JS-Daten?

Seit der Trennung von Front-End und Back-End sind die von manchen Back-End-Partnern bereitgestellten Datenstrukturen immer unübersichtlicher geworden. Ich dachte, dass die Trennung ihre Belastung verringern würde. Die Qualität der Schnittstelle wäre sehr hoch, aber die menschliche Faulheit spiegelt sich sehr „perfekt“ wider.

Da es sich bei js um eine typisierte Sprache handelt, treten diese Fehler häufig bei der Verwendung von Daten auf.

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

Diese Ausnahmen sind schwer zu finden und werden möglicherweise nicht entdeckt, selbst wenn sie rechtzeitig online gestellt werden. Denn diese Probleme werden durch Datenanomalien verursacht. Was wäre, wenn wir diese Probleme, die sich auf das Benutzererlebnis auswirken, elegant lösen oder vermeiden würden?

// 第一种做法肯定是这样的
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
[]

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JQuery-Datei hochladen, laden, Fortschrittsbalken hinzufügen

Detaillierte Erläuterung der Verwendung von JS-Prototypen und Prototypenkette

Das obige ist der detaillierte Inhalt vonZusammenfassung der Fähigkeiten zum Parsen von JS-Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!