JavaScript：重构动态日期键的JSON对象以实现数据透视转换

1. 问题描述与原始数据结构

在处理复杂数据时，我们经常会遇到需要对JSON对象进行重构的情况。一个常见场景是，数据中的某些关键信息（例如日期）被用作对象的键，而这些键本身是动态变化的。这使得直接访问和聚合数据变得困难。

假设我们有以下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
}];

在这个结构中，education 是固定的键，而 2021-12、2022-01 等日期是动态的键，它们的值是与该日期和教育类型关联的数据。这种结构对于按教育类型查询特定日期的值很方便，但如果我们需要按日期聚合所有教育类型的数据，则显得不够直观。

2. 目标数据结构

我们的目标是将上述数据结构转换为一种新的格式，其中每个对象代表一个特定的日期，并且该对象内部包含了所有教育类型在该日期下的值。日期本身将成为一个固定的 date 键的值。

立即学习“Java免费学习笔记（深入）”；

期望的输出格式如下：

[{
  "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": "100004545", // 注意这里，如果某个日期下没有某个教育类型的数据，则不包含该键
  "date": "2022-03",
}]

可以看到，新的结构实现了数据的“透视”：行和列的角色发生了互换，使得按日期进行数据分析变得更加直接。

Insou AI

Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

69

查看详情

3. 数据重构实现

为了实现上述转换，我们需要执行以下步骤：

1. 识别所有唯一的日期：遍历原始数据，收集所有作为键出现的日期字符串。
2. 识别所有唯一的教育类型：遍历原始数据，收集所有 education 键对应的值。
3. 构建新的数据结构：
   • 对于每个唯一的日期，创建一个新的空对象。
   • 将当前日期作为 date 键的值添加到新对象中。
   • 对于每个唯一的教育类型，查找其在当前日期下的值。如果存在，则将教育类型作为键，值作为对应的值添加到新对象中。

下面是实现此转换的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
}];

// 用于存储所有唯一日期的数组
let datesArray = [];
// 用于存储所有唯一教育类型的数组
let educationArray = [];

// 第一步：遍历原始数据，收集所有唯一的日期和教育类型
arr.forEach(item => {
  for (let key in item) {
    if (item.hasOwnProperty(key)) { // 确保是对象自身的属性
      if (key === "education") {
        // 检查教育类型是否已存在，不存在则添加
        if (!educationArray.includes(item[key])) {
          educationArray.push(item[key]);
        }
      } else {
        // 检查日期是否已存在，不存在则添加
        if (!datesArray.includes(key)) {
          datesArray.push(key);
        }
      }
    }
  }
});

// 用于存储最终结果的数组
let finalResult = [];

// 第二步：遍历每个唯一的日期，构建新的对象
datesArray.forEach(date => {
  let educationForThisDate = {}; // 为当前日期创建一个新对象

  // 第三步：遍历每个教育类型，获取其在当前日期下的值
  educationArray.forEach(education => {
    // 查找原始数组中对应教育类型和日期的值
    // 使用 filter 找到匹配的教育对象，并尝试获取日期对应的值
    const educationObj = arr.filter(x => x['education'] === education)[0];
    let educationValue = educationObj ? educationObj[date] : undefined;

    // 检查值是否存在且不为 undefined/null，才添加到新对象中
    // 如果希望即使值为 undefined/null 也包含键，可以移除此 if 检查
    if (educationValue !== undefined && educationValue !== null) {
      educationForThisDate[education] = String(educationValue); // 确保值是字符串类型
    }
  });

  // 将当前日期添加到新对象中
  educationForThisDate['date'] = date;
  // 将构建好的对象添加到最终结果数组
  finalResult.push(educationForThisDate);
});

console.log(finalResult);

4. 代码解析与注意事项

代码解析：

1. 收集唯一键值：

   • 首先，代码通过遍历原始 arr 数组中的每个对象，来识别所有出现过的日期（作为键）和教育类型（education 键的值）。
   • datesArray 和 educationArray 分别存储这些唯一的日期和教育类型，避免重复处理。hasOwnProperty 检查确保只处理对象自身的属性，而不是原型链上的属性。

2. 构建结果数组：

   • finalResult 数组将存储最终转换后的对象。
   • 外层循环 datesArray.forEach(date => { ... }) 确保我们为每个唯一的日期生成一个结果对象。

3. 填充日期对象：

   • 在每个日期循环内部，educationForThisDate = {} 初始化一个空对象，用于存放当前日期下的所有教育数据。
   • 内层循环 educationArray.forEach(education => { ... }) 遍历所有教育类型。
   • arr.filter(x => x['education'] === education)[0] 用于从原始 arr 中找到与当前 education 类型匹配的那个对象。[0] 确保我们取到第一个匹配项。
   • educationObj[date] 尝试获取该教育类型在当前 date 下的值。
   • if (educationValue !== undefined && educationValue !== null) 这一条件判断非常重要。它确保只有当某个教育类型在某个特定日期确实有值时，才将其添加到结果对象中。如果原始数据中某个日期没有某个教育类型的数据，该键将不会出现在最终的输出对象中，这符合期望的输出。
   • String(educationValue) 将值统一转换为字符串类型，以匹配目标输出格式的要求。
   • 最后，educationForThisDate['date'] = date; 将当前日期作为 date 键的值添加到对象中，并 finalResult.push(educationForThisDate); 将完整构建的对象添加到结果数组。

注意事项：

• education 键的存在性： 此解决方案假设每个原始对象都包含一个 education 键。如果 education 键可能缺失，需要增加额外的检查。
• 缺失数据处理： 当前实现中，如果某个 education 类型在特定 date 下没有对应的值（即 educationObj[date] 为 undefined 或 null），则该 education 键不会出现在该日期的结果对象中。如果业务需求是即使没有值也要显示，例如显示为 null 或 0，则需要调整 if (educationValue) 的判断逻辑。
• 数据类型转换： 原始数据中的日期值可以是数字或字符串。目标输出要求它们统一为字符串。String(educationValue) 确保了这一点。
• 性能优化： 对于非常大的数据集，在 educationArray.forEach 内部多次使用 arr.filter() 可能会导致性能问题，因为 filter 会遍历整个 arr 数组。更优化的方法是在收集 datesArray 和 educationArray 的同时，构建一个哈希映射（例如使用 Map 对象），将 education 和 date 作为复合键，直接存储对应的值，从而避免重复搜索。但在中小型数据集下，当前方案的可读性和简洁性是其优势。
• 键名冲突： 确保 education 类型的值不会与 date 键名冲突。在我们的例子中，school、colleg、university 不会与 date 冲突。

5. 总结

通过上述方法，我们成功地将一个以教育类型为中心、日期作为动态键的JSON数组，转换为了一个以日期为中心、教育类型作为动态键的新结构。这种“数据透视”的转换在数据分析和报表生成中非常有用，它使得我们能够更容易地按时间维度聚合和比较不同类别的数据。理解如何处理动态键和有效地重构数据是JavaScript数据处理中的一项核心技能。

以上就是JavaScript：重构动态日期键的JSON对象以实现数据透视转换的详细内容，更多请关注php中文网其它相关文章！