将嵌套对象数组转换为标准化键值对数组的完整教程

17次阅读

将嵌套对象数组转换为标准化键值对数组的完整教程

本文介绍如何将嵌套对象数组转换为标准化键值对数组的完整教程。本文介绍如何将包含日期字符串为键、数值为值的对象数组,高效转换为每个元素都具有统一 `date` 和 `count` 字段的对象数组,并支持保留嵌套结构或展平为一维数组。

在实际数据处理中,我们常遇到形如 [{ ‘2023-06-02’: 2, ‘2023-06-21’: 6 }, { ‘2023-06-29’: 2, ‘2023-06-23’: 1 }] 的数据结构——即数组中每个元素都是一个以日期为键、计数为值的扁平对象。但前端可视化(如图表库)或后端 API 通常要求结构化、字段统一的数据格式,例如 [{ date: ‘2023-06-02’, count: ‘2’ }, …]。

此时,可借助 Object.entries() + 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); // 输出:[[{count:"2",date:"2023-06-02"},{count:"6",date:"2023-06-21"}], ...]

? 可选:展平为一维数组(适用于聚合渲染场景)

若需所有日期-计数对合并为单层数组(如绘制时间序列折线图),追加 .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:"6",date:"2023-06-21"}, ...]

⚠️ 注意事项

  • 键名合法性:原始对象键含连字符(如 ‘2023-06-02’)是合法的字符串键,无需额外引号(但定义时建议加引号避免语法歧义);
  • 类型处理:count 值默认为数字,使用 String(count) 确保输出与示例一致;如需保留数字类型,可直接写 count;
  • 空对象/边界情况:若某对象为空({}),Object.entries() 返回 [],map 后生成空数组 [],逻辑安全,无需额外校验;
  • 性能提示:该方案为纯函数式、无副作用,适用于任意长度数组,时间复杂度 O(n×m),其中 n 是外层数组长度,m 是各对象平均键数量。

掌握此模式后,你可轻松适配类似需求:如将 { apple: 5, banana: 3 } → [{ name: ‘apple‘, value: 5 }, …],只需调整解构变量名与返回字段即可。

text=ZqhQzanResources