JS利用map整合雙數組的小技巧分享

Posted on by

前言

最近因公司業務需求編寫ECharts圖表展示相關公司階段型業務相關數據變化，需要服務端進行數據查詢返回給前端進行數據展示。但是由於反回的數據不便於前端 ECharts展示所以需要進行數據整合，奈何本人經驗不足隻能請教公司大佬，在大佬幫助下完成瞭數據整合，並學到一個前所未聞的合並方法今天分享給大傢。

模擬數據

下圖是將要被合並的兩數組

合並後數據

合並後數據要求以時間為唯一的key進行合並雙數組內的對象,對象內的值有則展示無則初始化本對象沒有的key並初始化值為0（如果表達不清晰下方是最後合並的數據）

合並思路

本次合並所用到的瞭js的mapp技術,既然是以時間作為唯一的key所以要遍歷數組一來初始化一個以時間為key的一個map然後遍歷數組二進行數據互補再將處理完的map轉換成數組就ok瞭

代碼展示&解析

第一步

先聲明模擬數據和創建一個空對象用承載map

      //模擬數據 arr1
      let testArrOne = [
        { date: "2021-8-11", testNumOne: 1 },
        { date: "2021-8-12", testNumOne: 2 },
        { date: "2021-8-13", testNumOne: 3 },
      ];
      //模擬數據 arr2
      let testArrTwo = [
        { date: "2021-8-12", testNumTwo: 2 },
        { date: "2021-8-14", testNumTwo: 4 },
        { date: "2021-8-15", testNumTwo: 5 },
      ];
      //合並方法
      let testMap = {}; //首先聲明一個空對象作作為 map

第二步

遍歷數組一進行map初始化

   //遍歷第一個數組
      testArrOne.forEach((item) => {
        testMap[item.date] = {
          date: item.date, //初始化時間
          testNumOne: item.testNumOne || 0, //初始化測試數據一
          testNumTwo: 0,  //初始化測試數據二
        };
      });

然後我們就得到瞭一個以時間作為唯一key的map 我們打印得到下圖數據

第三步

遍歷數組二進行相關賦值和初始化操作

    //遍歷第二個數組
      testArrTwo.forEach((item) => {
       //如果發現數組一包含時間的map對象就復制如若發現新時間進行初始化賦值空對象
        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;
      });

打印下map得到整合好的對象 如下

第四步

將 map 轉成 arr 就大功告成瞭

 this.listMapUtils.map2List(testMap);

下面是封裝好的 map 與 arr 相互轉換的代碼

      listMapUtils: {
      //arr轉map方法
        list2Map: function(list, key) {
          let map = {};
          if (list && Array.isArray(list) && list.length > 0) {
            list.forEach((item) => {
              item[key] ? (map[item[key]] = item) : "";
            });
          }
          return map;
        },
        //map 轉 arr 方法
        map2List: function(map) {
          let list = [];
          if (map && typeof map === "object") {
            for (let key in map) {
              list.push(map[key]);
            }
          }
          return list;
        },
      },

全部代碼

因為方便展示 map arr 互轉的方法我就在data裡申明瞭 同學們還是不要這樣寫身為前端還是要有模塊化思想的

<template>
  <div></div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      listMapUtils: {
        list2Map: function(list, key) {
          let map = {};
          if (list && Array.isArray(list) && list.length > 0) {
            list.forEach((item) => {
              item[key] ? (map[item[key]] = item) : "";
            });
          }
          return map;
        },
        map2List: function(map) {
          let list = [];
          if (map && typeof map === "object") {
            for (let key in map) {
              list.push(map[key]);
            }
          }
          return list;
        },
      },
    };
  },
  created() {
    this.mergeArr();
  },
  methods: {
    mergeArr() {
      //模擬數據 arr1
      let testArrOne = [
        { date: "2021-8-11", testNumOne: 1 },
        { date: "2021-8-12", testNumOne: 2 },
        { date: "2021-8-13", testNumOne: 3 },
      ];
      //模擬數據 arr2
      let testArrTwo = [
        { date: "2021-8-12", testNumTwo: 2 },
        { date: "2021-8-14", testNumTwo: 4 },
        { date: "2021-8-15", testNumTwo: 5 },
      ];

      //合並方法

      let testMap = {}; //首先聲明一個空對象作作為 map

      //遍歷第一給數組
      testArrOne.forEach((item) => {
        testMap[item.date] = {
          date: item.date,
          testNumOne: item.testNumOne || 0,
          testNumTwo: 0,
        };
      });

      testArrTwo.forEach((item) => {
        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;
      });
      
      //map 轉 arr
      this.listMapUtils.map2List(testMap);
      //得到最後結果
      console.log(this.listMapUtils.map2List(testMap));
    },
  },
};
</script>

<style></style>

總結

到此這篇關於JS利用map整合雙數組的文章就介紹到這瞭,更多相關JS整合雙數組內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：