0

0

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

霞舞

霞舞

发布时间:2026-01-02 21:57:07

|

231人浏览过

|

来源于php中文网

原创

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

本文介绍如何将包含日期键和数值键值对的对象数组,高效转换为统一格式的嵌套对象数组(每个对象含 `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():

Booth.ai
Booth.ai

高质量AI产品展示效果图生成

下载
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(),即可灵活适配嵌套或线性数据结构。

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

269

2023.08.04

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

452

2023.09.13

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

313

2023.08.02

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

229

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

434

2024.03.01

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

193

2023.11.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

251

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

206

2023.09.04

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号