ホームページ ウェブフロントエンド jsチュートリアル JS で JSON データのグループ化を最適化する方法

JS で JSON データのグループ化を最適化する方法

Apr 14, 2018 am 10:14 AM
javascript json 最適化

今回はJSのJSONデータのグループ化を最適化する方法を紹介します。 JSのJSONデータのグループ化を最適化する際の注意点は何ですか?

フロントエンドビューをレンダリングするために時間ごとにグループ化する必要があるデータが大量にあります
[
 {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
 {"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"},
 {"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
 {"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"}
]
ログイン後にコピー

次のように変換する必要があります

[
 {
 date: '2017-12-22',
 data: [
  {
  date: '2017-12-22',
  start_time: '10:00:00',
  end_time: '10:00:00',
  status: 'Performance Time'
  },
  {
  date: '2017-12-22',
  start_time: '10:40:00',
  end_time: '10:40:00',
  status: 'Performance Time'
  }
 ]
 },
 {
 date: '2017-12-23',
 data: [
  {
  date: '2017-12-23',
  start_time: '10:00:00',
  end_time: '10:00:00',
  status: 'Performance Time'
  },
  {
  date: '2017-12-23',
  start_time: '10:40:00',
  end_time: '10:40:00',
  status: 'Performance Time'
  }
 ]
 }
]
ログイン後にコピー

1. 独自の方法、多くのネットワーク

var map = {},
 nList = []
 //遍历原始数组
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 //如果map没有则在新nList中添加
 if (!map[item.date]) {
  nList.push({
  date: item.date,
  data: [item]
  })
  map[item.date] = item
 } else {
  //遍历nList
  for (var j = 0; j < nList.length; j++) {
  var nItem = nList[j]、
  //如查找到date符合则添加
  if (nItem.date == item.date) {
   nItem.data.push(item)
   //跳出循环
   break
  }
  }
 }
 }
ログイン後にコピー
実行効率: 1000 回のトラバースに約 3ms かかります。エレガントではなく、ES5 の機能が活用されていないと常々感じていたため、自分で最適化することにしました。

2. ES5 の機能を使用する for を

forEach

およびevery

に置き換えます

パフォーマンスの最適化

50%、約 1.5 ミリ秒!

3. パフォーマンス最適化の実践 配列内の日付は順番に配置されており、重複がないため、2 番目のループを削除することを検討できます

let map = {},
 nList = []
 //设置初始key为0
 let _nkey = 0
 arr.forEach((item, index) => {
 if (index === 0) {
  nList.push({
  date: item.date,
  data: [item]
  })
 } else {
  let oItem = arr[index - 1]
  //和前一个date一致则在当前添加,否则添加至nList
  if (item.date === oItem.date) {
  nList[_nkey]['data'].push(item)
  } else {
  nList.push({
   date: item.date,
   data: [item]
  })
  _nkey ++
  }
 }
 })
ログイン後にコピー

効率は再び 50% (約 1ms) 最適化されます。

PS: JS 操作 JSON の概要 JSON(

JavaScript

オブジェクト記法) これは、完全に言語に依存しないテキスト形式を使用する軽量のデータ交換形式であり、理想的なデータ交換形式です。同時に、JSON は JavaScript ネイティブ形式です。つまり、 JavaScript での JSON データの処理には、特別な API やツールキットは必要ありません。 この記事では主にJSでJSONを操作するための要点をまとめています。

JSON には、

object

と array の 2 つの構造があります。 1. オブジェクトは「{」(左括弧) で始まり、「}」(右括弧) で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。 名前は引用符で囲まれます。値が

string

の場合は括弧を使用する必要がありますが、数値型は必要ありません。例:

2. 配列は、順序付けられた値のコレクションです。配列は「[」 (左括弧) で始まり、「]」 (右括弧) で終わります。値を区切るには「,」(カンマ)を使用します。

例:

  var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
ログイン後にコピー

JSON データを便利に処理するために、JSON は json.js パッケージを提供します。ダウンロード アドレス: http://www.json.org/json.js

データ送信プロセスでは、jsonはテキスト、つまり文字列の形で送信され、JSはJSONオブジェクトに対して動作するため、JSONオブジェクトとJSON文字列の相互変換が鍵となります。例:

JSON 文字列:

  var str1 = '{ "name": "cxh", "sex": "man" }';
ログイン後にコピー

JSON オブジェクト:

 var str2 = { "name": "cxh", "sex": "man" };
ログイン後にコピー

1. JSON文字列をJSONオブジェクトに変換します 上記の str1 を使用するには、次を使用して JSON オブジェクトに変換する必要があります:

  //由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
ログイン後にコピー

それとも

りー

それとも

りー

そして、次のように読むことができます:

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
ログイン後にコピー

特記事項: obj が元々 JSON オブジェクトである場合、eval() 関数を使用した変換後も (複数回変換されても) JSON オブジェクトのままですが、parseJSON() 関数を使用した処理後に疑問が生じます (構文例外がスローされます)。

2. toJSONString() またはグローバル メソッド JSON.stringify() を使用して、JSON オブジェクトを JSON 文字列に変換できます。 例:

  var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
ログイン後にコピー

それとも

りー

注意:

上記のメソッドのうち、eval() 関数が js に付属していることを除いて、他の多くのメソッドは json.js パッケージから提供されます。 JSON の新しいバージョンが変更されました API では、JSON.stringify() メソッドと JSON.parse() メソッドの両方が Javascript の組み込みオブジェクトに挿入され、前者は次のようになります。 Object.toJSONString() になります。 String.parseJSON()。 toJSONString() メソッドと parseJSON() メソッドが見つからないというメッセージが表示された場合は、json パッケージのバージョンが低すぎることを意味します。

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

推奨読書:

JSのマルチスレッドランタイムライブラリであるNexus.jsの使い方の詳細な説明

JacksonがJSON文字列を解析する際の最初の文字の大文字と小文字の変換を操作する方法


以上がJS で JSON データのグループ化を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

C++ プログラムの最適化: 時間の複雑さを軽減する手法 C++ プログラムの最適化: 時間の複雑さを軽減する手法 Jun 01, 2024 am 11:19 AM

時間計算量は、入力のサイズに対するアルゴリズムの実行時間を測定します。 C++ プログラムの時間の複雑さを軽減するためのヒントには、適切なコンテナー (ベクター、リストなど) を選択して、データのストレージと管理を最適化することが含まれます。クイックソートなどの効率的なアルゴリズムを利用して計算時間を短縮します。複数の操作を排除して二重カウントを削減します。条件分岐を使用して、不必要な計算を回避します。二分探索などのより高速なアルゴリズムを使用して線形探索を最適化します。

WIN7システムのスタートアップ項目を最適化する方法 WIN7システムのスタートアップ項目を最適化する方法 Mar 26, 2024 pm 06:20 PM

1. デスクトップでキーの組み合わせ (win キー + R) を押してファイル名を指定して実行ウィンドウを開き、[regedit] と入力して Enter キーを押して確定します。 2. レジストリ エディターを開いた後、[HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer] をクリックして展開し、ディレクトリに Serialize 項目があるかどうかを確認します。ない場合は、エクスプローラーを右クリックして新しい項目を作成し、Serialize という名前を付けます。 3. 次に、「シリアル化」をクリックし、右側のペインの空白スペースを右クリックして、新しい DWORD (32) ビット値を作成し、「Star」という名前を付けます。

Vivox100s のパラメーター構成が明らかに: プロセッサーのパフォーマンスを最適化するには? Vivox100s のパラメーター構成が明らかに: プロセッサーのパフォーマンスを最適化するには? Mar 24, 2024 am 10:27 AM

Vivox100s のパラメーター構成が明らかに: プロセッサーのパフォーマンスを最適化するには?テクノロジーが急速に発展する今日、スマートフォンは私たちの日常生活に欠かせないものとなっています。スマートフォンの重要な部分であるプロセッサのパフォーマンスの最適化は、携帯電話のユーザー エクスペリエンスに直接関係します。注目度の高いスマートフォンとして、Vivox100s のパラメータ構成は多くの注目を集めており、特にプロセッサー性能の最適化はユーザーからの注目を集めています。プロセッサは携帯電話の「頭脳」として、携帯電話の動作速度に直接影響します。

PHP 配列を JSON に変換するための簡単なヒント PHP 配列を JSON に変換するための簡単なヒント May 03, 2024 pm 06:33 PM

PHP 配列は、 json_encode() 関数を使用して JSON 文字列に変換できます (例: $json=json_encode($array);)。逆に、 json_decode() 関数を使用して JSON から配列に変換できます ($array= json_decode($json);) 。その他のヒントには、深い変換の回避、カスタム オプションの指定、サードパーティ ライブラリの使用などがあります。

PHP 関数の非効率性を解決するにはどのような方法がありますか? PHP 関数の非効率性を解決するにはどのような方法がありますか? May 02, 2024 pm 01:48 PM

PHP 関数の効率を最適化する 5 つの方法: 変数の不必要なコピーを避ける。参照を使用して変数のコピーを回避します。繰り返しの関数呼び出しを避けてください。単純な関数をインライン化します。配列を使用したループの最適化。

ツールとライブラリを使用して C++ プログラムを最適化するにはどうすればよいですか? ツールとライブラリを使用して C++ プログラムを最適化するにはどうすればよいですか? May 08, 2024 pm 05:09 PM

最新の C++ 開発では、最適化のためにツールとライブラリを利用することが重要です。 Valgrind、Perf、LLDB などのツールはボトルネックを特定し、パフォーマンスを測定し、デバッグします。 Eigen、Boost、OpenCV などのライブラリは、線形代数、ネットワーク I/O、コンピューター ビジョンなどの分野の効率を向上させます。たとえば、Eigen を使用して行列の乗算を最適化し、Perf を使用してプログラムのパフォーマンスを分析し、Boost::Asio を使用して効率的なネットワーク I/O を実装します。

See all articles