Résumé des compétences d'analyse de données js

Cette fois, je vais vous apporter un résumé des compétences en analyse de données js. Quelles sont les précautions pour l'analyse des données js. Voici des cas pratiques, jetons un coup d'œil.

Depuis la séparation du front-end et du back-end, les structures de données fournies par certains partenaires back-end sont devenues de plus en plus confuses. Je pensais que la séparation réduirait leur charge. La qualité de l'interface serait très élevée, mais la paresse humaine se reflète très "parfaitement".

Comme js est un langage typé, plusieurs erreurs se produisent souvent lors de l'utilisation des données

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

Ces exceptions sont difficiles à trouver, et il se peut qu'il ne soit pas possible de les publier en ligne à temps. être trouvé. Parce que ces problèmes sont causés par des anomalies de données. Et si nous résolvions ou évitions avec élégance ces problèmes qui affectent l’expérience utilisateur ?

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jquery glisser téléchargement de fichier chargement ajouter une barre de progression

Explication détaillée de l'utilisation du prototype JS et chaîne prototype

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!