快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

合并思路

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

代碼展示&解析

第一步

先聲明模擬數(shù)據(jù)和創(chuàng)建一個(gè)空對(duì)象用承載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 = {}; //首先聲明一個(gè)空對(duì)象作作為 map

第二步

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

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

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

第三步

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

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

打印下map得到整合好的對(duì)象如下

第四步

將 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;
        },
      },

全部代碼

因?yàn)榉奖阏故?map arr 互轉(zhuǎn)的方法我就在data里申明了同學(xué)們還是不要這樣寫(xiě)身為前端還是要有模塊化思想的

<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 = {}; //首先聲明一個(gè)空對(duì)象作作為 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] || {}; //初始化對(duì)象
        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>