17370845950

本文介绍如何将嵌套对象数组转换为结构化键值对数组。本文介绍如何将每个对象元素的键（日期）和值（计数）拆解为标准化的 `{ date: 'yyyy-mm-dd', count: 'x' }` 对象，并支持保留二维结构或展平为一维数组。

在实际开发中，我们常遇到类似 [{ '2025-06-02': 2, '2025-06-21': 6 }, { '2025-06-29': 2, '2025-06-23': 1 }] 这样的数据结构——即一个数组，其每个元素是一个以日期为键、数值为值的对象。但前端渲染（如时间序列图表、日历表格）通常需要更规范的结构：每个数据项为独立对象，明确包含 date 和 count 字段。

解决思路非常清晰：对原数组逐项处理，利用 Object.entries() 将每个对象转为 [key, value] 键值对数组，再通过 .map() 映射为标准对象格式。关键代码如下：

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

const arrayTransformed = arrayWithDates.map(record =>
  Object.entries(record).map(([date, count]) => ({
    count: String(count), // 确保 count 为字符串类型（按需求可改为 number）
    date
  }))
);

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

✅ 输出结果：

[
  [{ "count": "2", "date": "2025-06-02" }, { "count": "6", "date": "2025-06-21" }],
  [{ "count": "2", "date": "2025-06-29" }, { "count": "1", "date": "2025-06-23" }]
]

若需扁平化为单一列表（例如统一供列表组件或图表库消费），只需链式调用 .flat()：

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

console.log(flatTransformed);
// 输出：一维数组，共 4 个对象

⚠️ 注意事项：

• 原始数据中键名含连字符（如 '2025-06-02'），必须用引号包裹定义，否则会因语法错误（减法运算）导致解析失败；
• Object.entries() 返回的键始终为字符串，因此 date 字段天然兼容 ISO 格式；
• 若需 count 保持数字类型（如用于计算），可将 String(count) 替换为 count；若后续需 JSON 序列化且要求严格字符串类型，则当前写法更稳妥；
• 该方案具备良好扩展性：如需添加 id、timestamp 等字段，可在内层 .map() 中直接扩展对象属性。

此方法简洁、函数式、无副作用，适用于现代浏览器及 Node.js 环境（ES2017+），是处理“键即维度、值即指标”类数据的标准实践。