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 を応援してください。

以下もご興味があるかもしれません: