快捷導(dǎo)航

JS利用map整合雙數(shù)組的小技巧分享

更新時間：2021年08月18日 16:10:44 作者：WeepingBoy

Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

最近因公司業(yè)務(wù)需求編寫ECharts圖表展示相關(guān)公司階段型業(yè)務(wù)相關(guān)數(shù)據(jù)變化，需要服務(wù)端進行數(shù)據(jù)查詢返回給前端進行數(shù)據(jù)展示。但是由于反回的數(shù)據(jù)不便于前端 ECharts展示所以需要進行數(shù)據(jù)整合，奈何本人經(jīng)驗不足只能請教公司大佬，在大佬幫助下完成了數(shù)據(jù)整合，并學(xué)到一個前所未聞的合并方法今天分享給大家。

模擬數(shù)據(jù)

下圖是將要被合并的兩數(shù)組

合并后數(shù)據(jù)

合并后數(shù)據(jù)要求以時間為唯一的key進行合并雙數(shù)組內(nèi)的對象,對象內(nèi)的值有則展示無則初始化本對象沒有的key并初始化值為0（如果表達不清晰下方是最后合并的數(shù)據(jù)）

合并思路

本次合并所用到的了js的mapp技術(shù),既然是以時間作為唯一的key所以要遍歷數(shù)組一來初始化一個以時間為key的一個map然后遍歷數(shù)組二進行數(shù)據(jù)互補再將處理完的map轉(zhuǎn)換成數(shù)組就ok了

代碼展示&解析

第一步

先聲明模擬數(shù)據(jù)和創(chuàng)建一個空對象用承載map

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

第二步

遍歷數(shù)組一進行map初始化

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

然后我們就得到了一個以時間作為唯一key的map 我們打印得到下圖數(shù)據(jù)

第三步

遍歷數(shù)組二進行相關(guān)賦值和初始化操作

    //遍歷第二個數(shù)組
      testArrTwo.forEach((item) => {
       //如果發(fā)現(xiàn)數(shù)組一包含時間的map對象就復(fù)制如若發(fā)現(xiàn)新時間進行初始化賦值空對象
        testMap[item.date] = testMap[item.date] || {}; 
       //賦值時間
        testMap[item.date].date = item.date;
        //賦值測試數(shù)據(jù)一如果沒有就初始化
        testMap[item.date].testNumOne = testMap[item.date].testNumOne || 0;
        //輔助測試數(shù)據(jù)二
        testMap[item.date].testNumTwo = item.testNumTwo;
      });

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

第四步

將 map 轉(zhuǎn)成 arr 就大功告成了

 this.listMapUtils.map2List(testMap);

下面是封裝好的 map 與 arr 相互轉(zhuǎn)換的代碼

      listMapUtils: {
      //arr轉(zhuǎn)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 轉(zhuǎn) arr 方法
        map2List: function(map) {
          let list = [];
          if (map && typeof map === "object") {
            for (let key in map) {
              list.push(map[key]);
            }
          }
          return list;
        },
      },

全部代碼

因為方便展示 map arr 互轉(zhuǎn)的方法我就在data里申明了同學(xué)們還是不要這樣寫身為前端還是要有模塊化思想的

<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() {
      //模擬數(shù)據(jù) arr1
      let testArrOne = [
        { date: "2021-8-11", testNumOne: 1 },
        { date: "2021-8-12", testNumOne: 2 },
        { date: "2021-8-13", testNumOne: 3 },
      ];
      //模擬數(shù)據(jù) arr2
      let testArrTwo = [
        { date: "2021-8-12", testNumTwo: 2 },
        { date: "2021-8-14", testNumTwo: 4 },
        { date: "2021-8-15", testNumTwo: 5 },
      ];

      //合并方法

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

      //遍歷第一給數(shù)組
      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 轉(zhuǎn) arr
      this.listMapUtils.map2List(testMap);
      //得到最后結(jié)果
      console.log(this.listMapUtils.map2List(testMap));
    },
  },
};
</script>

<style></style>