
本文介绍如何将嵌套对象数组转换为结构化键值对数组。本文介绍如何将每个对象元素的键(日期)和值(计数)拆解为标准化的 `{ date: 'yyyy-mm-dd', count: 'x' }` 对象,并支持保留二维结构或展平为一维数组。
在实际开发中,我们常遇到类似 [{ '2023-06-02': 2, '2023-06-21': 6 }, { '2023-06-29': 2, '2023-06-23': 1 }] 这样的数据结构——即一个数组,其每个元素是一个以日期为键、数值为值的对象。但前端渲染(如时间序列图表、日历表格)通常需要更规范的结构:每个数据项为独立对象,明确包含 date 和 count 字段。
解决思路非常清晰:对原数组逐项处理,利用 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), // 确保 count 为字符串类型(按需求可改为 number)
date
}))
);
console.log(arrayTransformed);
// 输出:二维数组,保持原始分组结构✅ 输出结果:
[
[{ "count": "2", "date": "2023-06-02" }, { "count": "6", "date": "2023-06-21" }],
[{ "count": "2", "date": "2023-06-29" }, { "count": "1", "date": "2023-06-23" }]
]若需扁平化为单一列表(例如统一供列表组件或图表库消费),只需链式调用 .flat():
const flatTransformed = arrayWithDates
.map(record => Object.entries(record).map(([date, count]) => ({
count: String(count),
date
})))
.flat();
console.log(flatTransformed);
// 输出:一维数组,共 4 个对象⚠️ 注意事项:
- 原始数据中键名含连字符(如 '2023-06-02'),必须用引号包裹定义,否则会因语法错误(减法运算)导致解析失败;
- Object.entries() 返回的键始终为字符串,因此 date 字段天然兼容 ISO 格式;
- 若需 count 保持数字类型(如用于计算),可将 String(count) 替换为 count;若后续需 JSON 序列化且要求严格字符串类型,则当前写法更稳妥;
- 该方案具备良好扩展性:如需添加 id、timestamp 等字段,可在内层 .map() 中直接扩展对象属性。
此方法简洁、函数式、无副作用,适用于现代浏览器及 Node.js 环境(ES2017+),是处理“键即维度、值即指标”类数据的标准实践。










