1. 问题描述与数据结构分析
在数据处理和前端展示中，我们经常会遇到需要对数据结构进行转换的场景。一个常见的问题是，当json对象中的键是动态生成（例如日期）时，如何将其重构为另一种更符合业务逻辑的格式。
假设我们有以下原始数据结构，其中每个对象代表一个教育类型，并包含多个动态的日期键及其对应的值：
原始数据格式示例：
var arr = [{
"education": "school",
"2021-12": 65.45,
"2022-01": 172762.27,
"2022-02": "959.5"
}, {
"education": "colleg",
"2021-12": 270.13,
"2022-01": 105429534.09,
"2022-02": 53543770.9,
"2022-03": 100004545
}, {
"education": "university",
"2021-12": 168396.95,
"2022-01": 170417648.96999997,
"2022-02": 1202822.9
}];在这个结构中，"education"键的值是固定的，而日期（如"2021-12"、"2022-01"）作为键是动态变化的。我们的目标是将数据重构为以日期为中心的新数组，其中每个对象代表一个特定的日期，并包含该日期下所有教育类型的数据。
期望输出格式示例：
[{
"school": "65.45",
"colleg": "270.13",
"university": "168396.95",
"date": "2021-12"
}, {
"school": "172762.",
"colleg": "105429534.09",
"university": "170417648.96999997",
"date": "2022-01"
}, {
"school": "959.5",
"colleg": "53543770.9",
"university": "1202822.9",
"date": "2022-02"
}, {
"colleg": "959.5",
"date": "2022-03",
}]可以看到，在期望的输出中，每个对象都包含一个"date"键，其值是原始数据中的日期，而原始的"education"值（如"school"、"colleg"）则变成了新对象的键，对应着该日期下的数据。
2. 重构策略与实现步骤
要实现这种数据重构，我们需要采取一种“数据透视”的策略。具体步骤如下：
- 收集所有独特的日期和教育类型： 在开始重构之前，我们需要知道所有可能出现的日期和教育类型，以便为最终的结构做准备。
- 以日期为维度迭代： 遍历所有收集到的独特日期，为每个日期创建一个新的对象。
- 填充教育类型数据： 对于每个日期对象，遍历所有教育类型，从原始数据中查找并提取该日期和教育类型对应的值，并将其作为键值对添加到当前日期对象中。
3. 代码实现
以下是使用JavaScript实现上述重构逻辑的详细代码：
var arr = [{
"education": "school",
"2021-12": 65.45,
"2022-01": 172762.27,
"2022-02": "959.5"
}, {
"education": "colleg",
"2021-12": 270.13,
"2022-01": 105429534.09,
"2022-02": 53543770.9,
"2022-03": 100004545
}, {
"education": "university",
"2021-12": 168396.95,
"2022-01": 170417648.96999997,
"2022-02": 1202822.9
}];
// 步骤1: 收集所有独特的日期和教育类型
let datesArray = []; // 用于存储所有不重复的日期
let educationArray = []; // 用于存储所有不重复的教育类型
arr.forEach(item => {
for (const key in item) {
if (item.hasOwnProperty(key)) { // 确保是对象自身的属性
if (key === "education") {
// 如果是 'education' 键，将其值添加到 educationArray
if (!educationArray.includes(item[key])) {
educationArray.push(item[key]);
}
} else {
// 否则，认为是日期键，将其添加到 datesArray
if (!datesArray.includes(key)) {
datesArray.push(key);
}
}
}
}
});
// 步骤2 & 3: 以日期为维度迭代，并填充教育类型数据
let finalResult = []; // 用于存储最终重构后的数据
datesArray.forEach(date => {
let educationForThisDate = {}; // 为当前日期创建一个新对象
// 遍历所有教育类型，填充当前日期的数据
educationArray.forEach(education => {
// 从原始数据中找到匹配当前教育类型和日期的值
// arr.filter(x => x['education'] === education) 找到所有该教育类型的原始对象
// [0][date] 获取该对象中对应日期的值
const educationItem = arr.filter(x => x['education'] === education)[0];
let educationValue = educationItem ? educationItem[date] : undefined;
// 仅当该教育类型在该日期有值时才添加到对象中
// 避免添加值为 undefined 或 null 的属性
if (educationValue !== undefined && educationValue !== null) {
educationForThisDate[education] = educationValue.toString(); // 转换为字符串，与期望输出保持一致
}
});
// 将当前日期添加到对象中
educationForThisDate['date'] = date;
// 将构建好的日期对象添加到最终结果数组
finalResult.push(educationForThisDate);
});
console.log(finalResult);4. 代码解析与注意事项
-
收集独特键：
- datesArray 和 educationArray 用于存储原始数据中所有不重复的日期键和教育类型值。
- 通过遍历原始数组 arr 中的每个对象及其属性，我们可以区分出 education 键和动态日期键，并将它们分别收集起来。hasOwnProperty(key) 用于确保只处理对象自身的属性，而不是原型链上的属性。
-
构建最终结果：
- finalResult 是我们将要返回的重构后的数组。
- 外层循环 datesArray.forEach(date => { ... }) 确保我们为每个独特的日期创建一个新的结果对象。
- 内层循环 educationArray.forEach(education => { ... }) 负责为当前日期对象填充所有相关的教育数据。
-
数据查找与赋值：
- arr.filter(x => x['education'] === education)[0]：这行代码用于在原始 arr 中找到与当前 education 类型匹配的第一个（通常也是唯一一个）对象。
- educationItem[date]：从找到的教育对象中，通过动态的 date 键获取对应的值。
- 值存在性检查： if (educationValue !== undefined && educationValue !== null) 是一个重要的检查。它确保只有当某个教育类型在特定日期确实有值时，才将其添加到结果对象中。这避免了在结果中出现 {"school": undefined, "date": "..."} 这样的情况，使输出更加干净。
- 类型转换： educationValue.toString() 将获取到的值转换为字符串。这是因为在期望的输出中，所有教育类型的值都被表示为字符串。根据实际需求，这一步可以调整或移除。
-
动态键处理：
- 整个解决方案的核心在于能够动态地处理键。通过先收集所有可能的键（日期和教育类型），然后以外层循环控制主要维度（日期），内层循环控制次要维度（教育类型）的方式，实现了数据的灵活重组。
5. 总结
本教程展示了一种将具有动态键的JSON数组重构为更适合分析和展示的格式的有效方法。通过识别所有独特的维度，并采用两层循环的策略，我们能够将原始数据从以教育类型为中心转换为以日期为中心的新结构。这种“数据透视”技术在处理各种复杂数据转换场景时非常有用，尤其是在需要根据不同维度聚合或展示数据时。在实际应用中，可以根据数据规模和性能要求，进一步优化查找逻辑（例如，使用 Map 或 reduce 进行预处理，以减少内层循环中的 filter 操作）。
