JSON对象重构：动态日期键的数组转换技巧-js教程-PHP中文网

JSON对象重构：动态日期键的数组转换技巧

本教程详细介绍了如何使用JavaScript重构一个包含动态日期键的JSON对象数组。针对原始数据中日期作为字段名、教育类型作为固定字段的结构，我们将学习如何将其转换为以日期为核心、教育类型为动态字段的新结构。文章将通过清晰的代码示例，指导读者高效地将数据从一种形式转换为另一种，以适应不同的数据分析或展示需求。

1. 问题背景与需求分析

在数据处理过程中，我们经常需要根据特定的分析或展示需求来重塑数据结构。本教程关注一个常见场景：将一个以日期作为动态键的json对象数组，转换为以日期作为固定字段、教育类型作为动态键的新结构。

原始数据结构示例：

原始数据是一个包含多个对象的数组，每个对象代表一个教育实体，并以日期（如"2021-12"）作为键存储该日期下的对应值。education字段是固定的。

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
}];

登录后复制

目标数据结构示例：

我们希望将数据重塑为另一个数组，其中每个对象代表一个特定的日期。在这个日期对象中，教育类型（如"school", "colleg"）将作为键，其对应的值是该教育类型在该日期下的数据，同时包含一个明确的date字段。

[{
  "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",
}]

登录后复制

核心挑战：

动态日期键： 原始数据中的日期是对象属性的键，且这些键是动态变化的，数量不固定。
数据聚合： 需要将不同教育类型在相同日期下的数据聚合到一个新的对象中。
结构转换： 将“日期作为键”转换为“日期作为值”，同时将“教育类型作为值”转换为“教育类型作为键”。

2. 解决方案设计

为了实现上述数据重构，我们可以采用以下策略：

识别所有唯一的日期： 遍历原始数据，收集所有作为键出现的日期字符串。
识别所有唯一的教育类型： 遍历原始数据，收集所有education字段的值。
按日期维度聚合： 针对每个唯一的日期，创建一个新的对象。然后，遍历所有唯一的教育类型，查找该教育类型在该日期下的值，并将其添加到当前日期对象中。

3. JavaScript实现步骤

我们将通过JavaScript代码逐步实现这个转换过程。

3.1 准备原始数据

首先，定义我们的原始数据数组arr：

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
}];

登录后复制

3.2 提取唯一的日期和教育类型

为了方便后续的数据聚合，我们需要首先确定所有涉及的日期和教育类型。

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

arr.forEach(item => {
  for (let 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);
        }
      }
    }
  }
});

console.log("Unique Dates:", datesArray);     // ["2021-12", "2022-01", "2022-02", "2022-03"]
console.log("Unique Educations:", educationArray); // ["school", "colleg", "university"]

登录后复制

这段代码遍历原始arr中的每个对象。对于每个对象的属性，如果键是"education"，则将其值添加到educationArray；否则，它被认为是日期键，并添加到datesArray。includes()方法确保了数组中只存储唯一的日期和教育类型。

3.3 按日期聚合数据并构建新结构

现在我们有了所有唯一的日期和教育类型，可以开始构建目标结构。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

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

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

  // 遍历每个唯一的教育类型
  educationArray.forEach(education => {
    // 找到原始数组中与当前教育类型匹配的对象
    // 注意：这里假设每个education类型在arr中是唯一的，或者我们只取第一个匹配项
    let originalObject = arr.find(x => x['education'] === education);

    // 检查原始对象是否存在，并且该日期下有值
    if (originalObject && originalObject[date] !== undefined && originalObject[date] !== null) {
      // 获取该教育类型在该日期下的值
      let educationValue = originalObject[date];
      // 将教育类型作为键，值作为其对应值添加到当前日期对象中
      // 并确保值转换为字符串，以符合目标输出格式
      educationForThisDate[education] = educationValue.toString();
    }
  });

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

console.log("Final Result:", JSON.stringify(finalResult, null, 2));

登录后复制

这段代码的核心逻辑是两层嵌套循环：

外层循环遍历datesArray，为每个日期创建一个新的结果对象educationForThisDate。
内层循环遍历educationArray，在原始arr中查找匹配当前education类型的对象。
如果找到了匹配的原始对象，并且该对象包含当前date作为键，且其值不为undefined或null，则将该education和其对应的值（转换为字符串）添加到educationForThisDate中。
最后，将当前date作为"date"属性添加到educationForThisDate，并将其推入finalResult数组。

4. 完整代码示例

将上述所有步骤整合，得到完整的解决方案代码：

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 => {
    // 查找原始数组中与当前教育类型匹配的对象
    const originalObject = arr.find(x => x['education'] === education);

    // 检查原始对象是否存在，且该日期下有值
    if (originalObject && originalObject[date] !== undefined && originalObject[date] !== null) {
      educationForThisDate[education] = originalObject[date].toString();
    }
  });

  educationForThisDate['date'] = date;
  finalResult.push(educationForThisDate);
});

console.log(JSON.stringify(finalResult, null, 2));

登录后复制

输出结果：

[
  {
    "school": "65.45",
    "colleg": "270.13",
    "university": "168396.95",
    "date": "2021-12"
  },
  {
    "school": "172762.27",
    "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"
  }
]

登录后复制

请注意，输出中的"school": "172762."在原始期望输出中可能是截断了，这里是完整的"172762.27"。此外，"colleg": "959.5"在原始期望输出的2022-03日期下有误，应为"100004545"，代码已按实际数据正确处理。

5. 注意事项与优化

数据完整性检查： 在代码中，我们使用了if (originalObject && originalObject[date] !== undefined && originalObject[date] !== null)来检查特定日期和教育类型的数据是否存在。这确保了只有有值的字段才会被添加到最终结果对象中。如果希望即使数据缺失也保留字段（例如值为null或undefined），可以调整此条件。
数据类型转换： 目标输出要求所有值都是字符串（例如"65.45"）。因此，在将值赋给新对象时，使用了.toString()方法进行显式转换。
性能考量： 对于非常大的数据集，arr.find(x => x['education'] === education)在每次内层循环中都会遍历原始arr，这可能导致性能问题。一个潜在的优化是在开始时将原始arr转换为一个以education为键的Map或对象，这样查找操作可以从O(N)降到O(1)。
```
// 优化：将原始数据转换为以 education 为键的 Map
const educationMap = new Map();
arr.forEach(item => {
    educationMap.set(item.education, item);
});

// 在内层循环中这样使用：
// const originalObject = educationMap.get(education);
```
登录后复制
这个优化能显著提高处理大规模数据的效率。
假设条件： 本教程的解决方案建立在“education键在每个原始对象中都存在”的假设之上。如果education键可能缺失，则需要在提取educationArray和查找originalObject时增加额外的检查。

6. 总结

通过本教程，我们学习了如何使用JavaScript有效地重构包含动态日期键的JSON对象数组。核心思路是先提取所有唯一的日期和教育类型，然后以日期为维度进行迭代，将相关教育类型的数据聚合到新的日期对象中。这种数据重塑技术在处理报表生成、数据可视化或后端API数据转换等场景中非常实用，能够帮助我们将数据转换为更符合特定业务逻辑和展示需求的形式。同时，我们也探讨了性能优化和数据完整性处理的关键点，以确保解决方案的健壮性和效率。

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