So analysieren Sie Daten in js perfekt

Dieser Artikel zeigt Ihnen die Methoden und Techniken zum perfekten Parsen von Daten in JS. Freunde, die sich dafür interessieren, können darauf verweisen.

Seit der Trennung von Front-End und Back-End sind die von manchen Back-End-Partnern bereitgestellten Datenstrukturen immer unübersichtlicher geworden. Sie dachten, dass die Trennung ihre Belastung verringern würde und die Qualität der Schnittstelle sehr hoch sein würde, aber die menschliche Faulheit erwies sich als „perfekt“.

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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Das Problem und die Lösung des {{}}-Flimmerns beim Rendern von Vue

jQuery implementiert Text mit mehr als 1 Zeile, Methode zum automatischen Hinzufügen von Ellipsen, wenn 2 Zeilen oder eine bestimmte Anzahl von Zeilen vorhanden sind

Methode zum Erhalten von Kontextparameterwerten mithilfe des EL-Ausdrucks in JS

Das obige ist der detaillierte Inhalt vonSo analysieren Sie Daten in js perfekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!