嵌套数组转键值对教程详解

一分耕耘，一分收获！既然打开了这篇文章《嵌套数组转键值对，结构化教程详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本文介绍如何将包含日期键和数值键值对的对象数组，高效转换为统一格式的嵌套对象数组（每个对象含 `date` 和 `count` 字段），并支持可选的扁平化处理。

在实际开发中，尤其是处理时间序列数据（如日志统计、报表聚合）时，常会遇到类似以下结构的原始数据：每个数组元素是一个对象，其属性名是日期字符串（如 '2023-06-02'），属性值是对应计数（如 2）。但前端渲染图表或传递给组件时，往往需要标准化为 { date: '...', count: '...' } 形式的对象数组。本文提供简洁、可复用的转换方案。

核心思路：双层 map + Object.entries

JavaScript 的 Object.entries() 可将任意对象安全转为 [key, value] 数组，配合链式 map 即可完成结构重塑：

const arrayWithDates = [
  { '2023-06-02': 2, '2023-06-21': 6 },
  { '2023-06-29': 2, '2023-06-23': 1 }
];

const arrayTransformed = arrayWithDates.map(record =>
  Object.entries(record).map(([date, count]) => ({
    count: String(count), // 显式转字符串，确保类型一致
    date
  }))
);

console.log(arrayTransformed);
// 输出：嵌套二维数组，保留原始分组结构

✅ 关键点说明：

• 外层 map 遍历原始数组中的每个对象（即每个“数据分组”）；
• 内层 map 遍历该对象的所有键值对，解构为 date（键）和 count（值）；
• String(count) 确保 count 字段为字符串类型（符合示例预期），如需保持数字类型，可直接写 count；
• 属性名简写 date 等价于 date: date，提升可读性。

进阶：一键扁平化（Flattening）

若无需保留原始分组结构，而希望得到单层数组（例如用于 ECharts 数据源或列表渲染），可在链式调用末尾添加 .flat()：

const flatTransformed = arrayWithDates
  .map(record =>
    Object.entries(record).map(([date, count]) => ({
      count: String(count),
      date
    }))
  )
  .flat();

console.log(flatTransformed);
// 输出：[{ count: "2", date: "2023-06-02" }, ..., { count: "1", date: "2023-06-23" }]

⚠️ 注意事项：

• 若输入对象存在非日期键（如 null、undefined 或数字键），Object.entries() 仍会将其纳入，建议提前校验或过滤；
• 日期键若含非法字符（如空格、斜杠不规范），需先清洗再转换；
• 兼容性：Object.entries() 和 flat() 均为 ES2017+ 特性，如需支持旧版浏览器，请引入 polyfill 或改用 reduce + concat 模拟扁平化。

总结

该转换模式简洁、函数式且无副作用，适用于任意“单层键值对象数组”的标准化重构。掌握 Object.entries() 与嵌套 map 的组合使用，能显著提升处理动态键名数据的效率与可维护性。根据业务需求选择是否调用 .flat()，即可灵活适配嵌套或线性数据结构。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《嵌套数组转键值对教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。