JSはマップを使用してdouble配列を統合します

JSはマップを使用してdouble配列を統合します

序文

最近、会社のビジネスニーズにより、会社の段階的なビジネスに関連するデータの変化を表示するための ECharts チャートを作成しました。サーバーはデータを照会し、データを表示するためにフロントエンドに返す必要があります。しかし、返されたデータはフロントエンドのEChartsに表示するのに不便なので、データ統合が必要です。しかし、経験不足のため、会社の上司に助けを求めることしかできませんでした。上司の助けを借りて、データ統合を完了し、これまでにないマージ方法を学び、今日皆さんと共有します。

データのシミュレーション

次の図は、結合する 2 つの配列を示しています。

結合されたデータ

マージされたデータは、double 配列内のオブジェクトを、time のみをキーとしてマージする必要があります。オブジェクトに値が存在する場合は、それが表示されます。存在しない場合は、オブジェクトが持っていないキーが初期化され、初期値は 0 になります (式が明確でない場合は、最終的なマージされたデータが以下に表示されます)

合併のアイデア

このマージでは、js mapp テクノロジが使用されます。時間が唯一のキーであるため、配列 1 をトラバースして時間をキーとしてマップを初期化し、次に配列 2 をトラバースしてデータを補完し、処理されたマップを配列に変換する必要があります。

コードの表示と分析

最初のステップ

まずシミュレーションデータを宣言し、マップを格納する空のオブジェクトを作成します。

      //シミュレートされたデータ arr1
      testArrOne = [ とします。
        { 日付: "2021-8-11", テスト番号: 1 },
        { 日付: "2021-8-12", テスト番号: 2 },
        { 日付: "2021-8-13", テスト番号: 3 },
      ];
      //シミュレートされたデータ arr2
      testArrTwo = [ とします。
        { 日付: "2021-8-12", testNumTwo: 2 },
        { 日付: "2021-8-14", testNumTwo: 4 },
        { 日付: "2021-8-15", testNumTwo: 5 },
      ];
      //マージメソッド let testMap = {}; //まず空のオブジェクトをマップとして宣言する

ステップ2

配列を走査してマップを初期化する

   //最初の配列を走査する testArrOne.forEach((item) => {
        testMap[item.date] = {
          date: item.date, //初期化時刻 testNumOne: item.testNumOne || 0, //初期化テストデータ 1 testNumTwo: 0, //初期化テストデータ 2 };
      });
  

すると、時間を唯一のキーとするマップができます。次のデータを出力します。

ステップ3

配列2を走査して、関連する割り当てと初期化操作を実行します。

    // 2番目の配列を走査する testArrTwo.forEach((item) => {
       //配列に時刻を含むマップ オブジェクトが含まれている場合は、それをコピーします。新しい時刻が見つかった場合は、初期化して空のオブジェクトを割り当てます。testMap[item.date] = testMap[item.date] || {}; 
       //割り当て timetestMap[item.date].date = item.date;
        //テスト データに 1 を割り当てます。そうでない場合は、初期化します。testMap[item.date].testNumOne = testMap[item.date].testNumOne || 0;
        //補助テストデータ twotestMap[item.date].testNumTwo = item.testNumTwo;
      });

次のようにマップを印刷して統合オブジェクトを取得します。

ステップ4

map を arr に変換すれば完了です。

 this.listMapUtils.map2List(テストマップ);

以下は、mapとarr間の変換をカプセル化したコードです。

      リストマップユーティリティ: {
      //マップメソッドにarrする list2Map: function(list, key) {
          map = {} とします。
          if (リスト && Array.isArray(リスト) && リスト.length > 0) {
            リスト.forEach((項目) => {
              アイテム[キー] ? (map[アイテム[キー]] = アイテム) : "";
            });
          }
          マップを返します。
        },
        //arrメソッドにマップする map2List: function(map) {
          リストを [] にします。
          if (map && typeof map === "オブジェクト") {
            for (let key in map) {
              リストをプッシュします(map[キー])。
            }
          }
          リストを返します。
        },
      },


完全なコード

map と arr の変換方法を示すのに便利なので、データに記載しました。学生はこのように書いてはいけません。フロントエンドとしては、やはりモジュール化の考え方が必要です。

<テンプレート>
  <div></div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  データ() {
    戻る {
      リストマップユーティリティ: {
        list2Map: 関数(リスト、キー) {
          map = {} とします。
          if (リスト && Array.isArray(リスト) && リスト.length > 0) {
            リスト.forEach((項目) => {
              アイテム[キー] ? (map[アイテム[キー]] = アイテム) : "";
            });
          }
          マップを返します。
        },
        map2List: 関数(map) {
          リストを [] にします。
          if (map && typeof map === "オブジェクト") {
            for (let key in map) {
              リストをプッシュします(map[キー])。
            }
          }
          リストを返します。
        },
      },
    };
  },
  作成された() {
    この.mergeArr();
  },
  メソッド: {
    マージArr() {
      //シミュレートされたデータ arr1
      testArrOne = [ とします。
        { 日付: "2021-8-11", テスト番号: 1 },
        { 日付: "2021-8-12", テスト番号: 2 },
        { 日付: "2021-8-13", テスト番号: 3 },
      ];
      //シミュレートされたデータ arr2
      testArrTwo = [ とします。
        { 日付: "2021-8-12", testNumTwo: 2 },
        { 日付: "2021-8-14", testNumTwo: 4 },
        { 日付: "2021-8-15", testNumTwo: 5 },
      ];

      //マージメソッド let testMap = {}; //まず空のオブジェクトをマップとして宣言する

      //最初の配列を走査する testArrOne.forEach((item) => {
        testMap[item.date] = {
          日付: アイテム.日付、
          テスト番号: 項目.テスト番号 || 0,
          テスト番号2: 0,
        };
      });

      testArrTwo.forEach((アイテム) => {
        testMap[item.date] = testMap[item.date] || {}; //オブジェクトを初期化します testMap[item.date].date = item.date;
        testMap[item.date].testNumOne = testMap[item.date].testNumOne || 0;
        testMap[item.date].testNumTwo = item.testNumTwo;
      });
      
      //arrにマップする
      this.listMapUtils.map2List(テストマップ);
      //最終結果を取得します console.log(this.listMapUtils.map2List(testMap));
    },
  },
};
</スクリプト>

<スタイル></スタイル>

要約する

これで、マップを使用してダブル配列を統合する JS に関するこの記事は終了です。関連する JS 統合ダブル配列コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • コーディングスキルを向上させるためのJavaScriptのヒント
  • JavaScriptに関するヒントをいくつか共有します
  • 9 つの JavaScript 日常開発のヒント
  • JavaScript コーディングのヒントの共有
  • JavaScript フロントエンド開発における数値計算のヒント
  • 5分でJavaScriptの9つのヒントをマスターしましょう
  • JS 開発効率を上げる4つの超実践的なヒント

<<:  MySQL 8.0.18 のさまざまなバージョンのインストールとインストール中に発生した問題 (要点の要約)

>>:  DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する

推薦する

Redhat 7.3 に MySQL 8.0.22 をインストールするための詳細なチュートリアル (バイナリ インストール)

目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

MySQLデータベースの管理者パスワードを忘れた場合の解決策

1. コマンド mysqld --skip-grant-tables を入力します (前提条件: m...

Mysql SQL ステートメント演習 (50 問)

テーブル名とフィールド–1. 学生リスト学生 (s_id、s_name、s_birth、s_sex)...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

MySQL MGR 構築時の一般的な問題と解決策

目次01 よくある故障 1 02 よくある欠陥 2 03 よくある欠陥 3 04 よくある欠陥 4 ...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...

...

KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明

SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...

docker を使用して influxdb と mongo をデプロイするための一般的なコマンド

Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...