ホームページ > ウェブフロントエンド > jsチュートリアル > jsデータ解析スキルのまとめ

jsデータ解析スキルのまとめ

php中世界最好的语言
リリース: 2018-05-10 13:40:19
オリジナル
1900 人が閲覧しました

今回は、jsデータ解析スキルの概要をお届けします。jsデータ解析の注意事項は何ですか?実際のケースを見てみましょう。

フロントエンドとバックエンドが分離されて以来、一部のバックエンド パートナーが提供するデータ構造はますます複雑になってきました。分離することで負担が軽減され、インターフェイスの品質も非常に高くなるのではないかと思ったのですが、人間の怠惰が「完璧」であることが示されています。 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
[]
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery ファイルのアップロードと進行状況バーの追加


JS プロトタイプとプロトタイプ チェーンの使用方法の詳細な説明

以上がjsデータ解析スキルのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート