JS利⽤map整合双数组的⼩技巧分享
⽬录
前⾔
模拟数据
合并后数据
合并思路
代码展⽰&解析
第⼀步
第⼆步
第三步
第四步
全部代码
总结
前⾔
最近因公司业务需求编写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: stNumOne || 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 = stNumTwo;
});
打印下map得到整合好的对象如下
第四步
将 map 转成 arr 就⼤功告成了
this.listMapUtils.map2List(testMap);
下⾯是封装好的 map 与 arr 相互转换的代码typeof array
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() {
},
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: stNumOne || 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 = stNumTwo;
});
//map 转 arr
this.listMapUtils.map2List(testMap);
//得到最后结果
console.log(this.listMapUtils.map2List(testMap));
},
},
};
</script>
<style></style>
总结
到此这篇关于JS利⽤map整合双数组的⽂章就介绍到这了，更多相关JS整合双数组内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。