高效处理前后端数据匹配：优化嵌套循环代码
本文将探讨如何优化一段用于处理前后端数据匹配的 JavaScript 代码。该代码旨在将后端返回的数据填充到前端预定义的数据结构中，但原代码效率低下，嵌套循环过多。 我们将分析问题，并提供更简洁高效的解决方案。
问题描述：前端需要显示一份包含标题和数值的数据报表，数据结构如图所示。后端返回的数据结构与前端结构并不完全一致，前端数据结构中每个数据项包含一个 value 字段用于存储数值，而这个字段需要从后端数据中匹配查找并赋值。 原代码使用多层嵌套循环来实现这个匹配过程，效率低且可读性差。
原代码片段如下：
const { data, code } = await incomeStatement(this.dateValue)
this.dataList.forEach((item, index) => {
item.content.forEach((it, inde) => {
Object.keys(it).forEach(key => {
Object.keys(data).forEach(keytwo => {
if (keytwo == key) {
this.dataList[index].content[inde].value = data[keytwo]
}
})
})
})
});该代码的问题在于使用了四层嵌套循环，导致时间复杂度较高。 对于大型数据集，效率会非常低。
立即学习“Java免费学习笔记（深入）”；
优化方案：
为了提高效率，我们可以利用 JavaScript 的特性来简化代码。 一个更有效的方案是使用 flatMap 方法将嵌套的 content 数组扁平化，然后使用 forEach 循环遍历每个数据项。 由于后端数据键名与前端数据项键名一致，我们可以直接利用对象的解构赋值，并通过获取剩余属性的第一个键名来实现数据匹配。
优化后的代码如下：
dataList.flatMap(it => it.content)
.forEach(it => {
const { title, value, ...rest } = it;
it.value = data[Object.keys(rest)[0]];
});这段代码首先使用 flatMap 将 dataList 中所有 content 数组元素扁平化成一个单层数组。然后，它使用 forEach 循环遍历每个数据项，利用解构赋值将 title 和 value 属性与其他属性分离。 Object.keys(rest)[0] 获取剩余属性的第一个键名（即后端数据的键名），然后直接将对应的后端数据值赋给 it.value。 这样就避免了多层嵌套循环，显著提高了代码效率和可读性。
通过这种优化，代码变得更加简洁，效率也得到了大幅提升，从而更好地处理前后端数据匹配问题。
