
本文介绍如何将包含日期键和数值键值对的对象数组,高效转换为统一格式的嵌套对象数组(每个对象含 `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(),即可灵活适配嵌套或线性数据结构。










