本文介绍在ECharts数据展示场景中，利用JavaScript Map对象高效合并两个数组的方法。通过以时间为唯一Key遍历初始化并互补赋值，解决前端展示数据缺失问题，最后将Map转换回数组，提供完整代码与模块化封装思路。
前言
近期因公司业务需求，需使用ECharts图表展示阶段性业务数据变化，这要求服务端查询数据并返回给前端进行渲染。由于原始返回数据格式不便于ECharts直接展示，必须进行数据整合。鉴于个人经验有限，经请教资深同事后完成了数据整合工作，并习得一种高效的合并方法，特此分享。
模拟数据
下图展示了待合并的两个原始数组。
合并后数据
合并后的数据要求以时间为唯一Key，整合双数组内的对象。若对象内某项值存在则展示，若不存在则初始化该Key并赋值为0（具体合并结果见下方示例）。
合并思路
本次合并利用了JS的Map技术。核心逻辑是以时间为唯一Key，首先遍历第一个数组以初始化一个以时间为Key的Map，接着遍历第二个数组进行数据互补，最后将处理好的Map转换回数组即可完成操作。
代码展示&解析
第一步
首先声明模拟数据，并创建一个空对象用于承载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，打印该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转换为数组，至此主要逻辑完成。
this.listMapUtils.map2List(testMap);
以下是封装好的Map与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与Array互转的方法，我在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整合双数组内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！