JavaScript:重构动态日期键的JSON对象以实现数据透视转换

javascript:重构动态日期键的json对象以实现数据透视转换

本文旨在探讨如何将一个包含动态日期键的JSON数组重构为另一种更易于分析的格式。原始数据以教育类型为中心,日期作为动态键存储数值;目标是将数据转换为以日期为中心,教育类型作为动态键的结构。文章将通过详细的JavaScript代码示例,演示如何高效地提取和转换数据,以应对动态键的挑战,实现数据透视。

1. 问题描述与原始数据结构

在处理复杂数据时,我们经常会遇到需要对JSON对象进行重构的情况。一个常见场景是,数据中的某些关键信息(例如日期)被用作对象的键,而这些键本身是动态变化的。这使得直接访问和聚合数据变得困难。

假设我们有以下JavaScript数组,其中每个对象代表一种教育类型,并且包含了不同日期的相关数值:

var arr = [{  "education": "school",  "2021-12": 65.45,  "2022-01": 172762.27,  "2022-02": "959.5"}, {  "education": "colleg",  "2021-12": 270.13,  "2022-01": 105429534.09,  "2022-02": 53543770.9,  "2022-03": 100004545}, {  "education": "university",  "2021-12": 168396.95,  "2022-01": 170417648.96999997,  "2022-02": 1202822.9}];

在这个结构中,education 是固定的键,而 2021-12、2022-01 等日期是动态的键,它们的值是与该日期和教育类型关联的数据。这种结构对于按教育类型查询特定日期的值很方便,但如果我们需要按日期聚合所有教育类型的数据,则显得不够直观。

2. 目标数据结构

我们的目标是将上述数据结构转换为一种新的格式,其中每个对象代表一个特定的日期,并且该对象内部包含了所有教育类型在该日期下的值。日期本身将成为一个固定的 date 键的值。

立即学习“Java免费学习笔记(深入)”;

期望的输出格式如下:

[{  "school": "65.45",  "colleg": "270.13",  "university": "168396.95",  "date": "2021-12"}, {  "school": "172762.",  "colleg": "105429534.09",  "university": "170417648.96999997",  "date": "2022-01"}, {  "school": "959.5",  "colleg": "53543770.9",  "university": "1202822.9",  "date": "2022-02"}, {  "colleg": "100004545", // 注意这里,如果某个日期下没有某个教育类型的数据,则不包含该键  "date": "2022-03",}]

可以看到,新的结构实现了数据的“透视”:行和列的角色发生了互换,使得按日期进行数据分析变得更加直接。

3. 数据重构实现

为了实现上述转换,我们需要执行以下步骤:

识别所有唯一的日期:遍历原始数据,收集所有作为键出现的日期字符串。识别所有唯一的教育类型:遍历原始数据,收集所有 education 键对应的值。构建新的数据结构:对于每个唯一的日期,创建一个新的空对象。将当前日期作为 date 键的值添加到新对象中。对于每个唯一的教育类型,查找其在当前日期下的值。如果存在,则将教育类型作为键,值作为对应的值添加到新对象中。

下面是实现此转换的JavaScript代码:

var arr = [{  "education": "school",  "2021-12": 65.45,  "2022-01": 172762.27,  "2022-02": "959.5"}, {  "education": "colleg",  "2021-12": 270.13,  "2022-01": 105429534.09,  "2022-02": 53543770.9,  "2022-03": 100004545}, {  "education": "university",  "2021-12": 168396.95,  "2022-01": 170417648.96999997,  "2022-02": 1202822.9}];// 用于存储所有唯一日期的数组let datesArray = [];// 用于存储所有唯一教育类型的数组let educationArray = [];// 第一步:遍历原始数据,收集所有唯一的日期和教育类型arr.forEach(item => {  for (let key in item) {    if (item.hasOwnProperty(key)) { // 确保是对象自身的属性      if (key === "education") {        // 检查教育类型是否已存在,不存在则添加        if (!educationArray.includes(item[key])) {          educationArray.push(item[key]);        }      } else {        // 检查日期是否已存在,不存在则添加        if (!datesArray.includes(key)) {          datesArray.push(key);        }      }    }  }});// 用于存储最终结果的数组let finalResult = [];// 第二步:遍历每个唯一的日期,构建新的对象datesArray.forEach(date => {  let educationForThisDate = {}; // 为当前日期创建一个新对象  // 第三步:遍历每个教育类型,获取其在当前日期下的值  educationArray.forEach(education => {    // 查找原始数组中对应教育类型和日期的值    // 使用 filter 找到匹配的教育对象,并尝试获取日期对应的值    const educationObj = arr.filter(x => x['education'] === education)[0];    let educationValue = educationObj ? educationObj[date] : undefined;    // 检查值是否存在且不为 undefined/null,才添加到新对象中    // 如果希望即使值为 undefined/null 也包含键,可以移除此 if 检查    if (educationValue !== undefined && educationValue !== null) {      educationForThisDate[education] = String(educationValue); // 确保值是字符串类型    }  });  // 将当前日期添加到新对象中  educationForThisDate['date'] = date;  // 将构建好的对象添加到最终结果数组  finalResult.push(educationForThisDate);});console.log(finalResult);

4. 代码解析与注意事项

代码解析:

收集唯一键值:

首先,代码通过遍历原始 arr 数组中的每个对象,来识别所有出现过的日期(作为键)和教育类型(education 键的值)。datesArray 和 educationArray 分别存储这些唯一的日期和教育类型,避免重复处理。hasOwnProperty 检查确保只处理对象自身的属性,而不是原型链上的属性。

构建结果数组:

finalResult 数组将存储最终转换后的对象。外层循环 datesArray.forEach(date => { … }) 确保我们为每个唯一的日期生成一个结果对象。

填充日期对象:

在每个日期循环内部,educationForThisDate = {} 初始化一个空对象,用于存放当前日期下的所有教育数据。内层循环 educationArray.forEach(education => { … }) 遍历所有教育类型。arr.filter(x => x[‘education’] === education)[0] 用于从原始 arr 中找到与当前 education 类型匹配的那个对象。[0] 确保我们取到第一个匹配项。educationObj[date] 尝试获取该教育类型在当前 date 下的值。if (educationValue !== undefined && educationValue !== null) 这一条件判断非常重要。它确保只有当某个教育类型在某个特定日期确实有值时,才将其添加到结果对象中。如果原始数据中某个日期没有某个教育类型的数据,该键将不会出现在最终的输出对象中,这符合期望的输出。String(educationValue) 将值统一转换为字符串类型,以匹配目标输出格式的要求。最后,educationForThisDate[‘date’] = date; 将当前日期作为 date 键的值添加到对象中,并 finalResult.push(educationForThisDate); 将完整构建的对象添加到结果数组。

注意事项:

education 键的存在性: 此解决方案假设每个原始对象都包含一个 education 键。如果 education 键可能缺失,需要增加额外的检查。缺失数据处理: 当前实现中,如果某个 education 类型在特定 date 下没有对应的值(即 educationObj[date] 为 undefined 或 null),则该 education 键不会出现在该日期的结果对象中。如果业务需求是即使没有值也要显示,例如显示为 null 或 0,则需要调整 if (educationValue) 的判断逻辑。数据类型转换: 原始数据中的日期值可以是数字或字符串。目标输出要求它们统一为字符串。String(educationValue) 确保了这一点。性能优化: 对于非常大的数据集,在 educationArray.forEach 内部多次使用 arr.filter() 可能会导致性能问题,因为 filter 会遍历整个 arr 数组。更优化的方法是在收集 datesArray 和 educationArray 的同时,构建一个哈希映射(例如使用 Map 对象),将 education 和 date 作为复合键,直接存储对应的值,从而避免重复搜索。但在中小型数据集下,当前方案的可读性和简洁性是其优势。键名冲突: 确保 education 类型的值不会与 date 键名冲突。在我们的例子中,school、colleg、university 不会与 date 冲突。

5. 总结

通过上述方法,我们成功地将一个以教育类型为中心、日期作为动态键的JSON数组,转换为了一个以日期为中心、教育类型作为动态键的新结构。这种“数据透视”的转换在数据分析和报表生成中非常有用,它使得我们能够更容易地按时间维度聚合和比较不同类别的数据。理解如何处理动态键和有效地重构数据是JavaScript数据处理中的一项核心技能。

以上就是JavaScript:重构动态日期键的JSON对象以实现数据透视转换的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1523350.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 15:50:39
下一篇 2025年12月20日 15:50:47

相关推荐

  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • CSS flex布局属性:align-items和align-content的区别

    在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)…

    2025年12月24日 好文分享
    000
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 好文分享
    000
  • 巧用CSS实现各种奇形怪状按钮(附代码)

    本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助! 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 css 实现稍微有点难度和技巧性的按钮,讲解使用 css 如何尽可能的实现它们。【推荐学习:…

    2025年12月24日 好文分享
    000
  • 原来利用纯CSS也能实现文字轮播与图片轮播!

    怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯css也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助! 今天,分享一个实际业务中能够用得上的动画技巧。【推荐学习:css视频教程】 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 总结整理:需要避坑的五大常见css错误(收藏)

    本篇文章给大家总结5个最常见的css错误,并介绍一下避坑方法,希望对大家有所帮助! 正如我们今天所知,CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。 它简单、强大,而且是声明式的。我们可以很容易地实现复杂的事情,如暗黑/光明模式。然而,对它有很多误解…

    2025年12月24日
    000
  • CSS+JS实现爱心点赞按钮(代码示例)

    本篇文章给大家介绍一下css+js实现一个“爱之满满”点赞按钮的方法,希望对大家有所帮助! 前段时间在看一档说唱节目,被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。 于是这次给大家带来一个爱之满满的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • 让人眼前一亮的五个前端小技巧

    为了让大家编程更轻松一些,本挑选一些有用的但相对比较少见有用的技巧。废话不多说,开车了。 1.快速隐藏 要隐藏一个DOM元素,不需要JavaScript。一个原生的HTML属性就足以隐藏。其效果类似于添加一个style display: none;。 该段落在页面上是不可见的,它对HTML是隐藏的。…

    2025年12月24日
    000
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • 如何实现炫酷的数字大屏

    依托强大无远开发平台,可以快速实现带各种酷炫联动效果的数字化大屏。一起来看一下吧 DEMO 地址:https://previewer.wuyuan.io/p… 配置地址:https://workbench.wuyuan.io/p… 效果图 1 效果图 2 实现步骤 1. 完成…

    2025年12月24日 好文分享
    000
  • 使用JS或CSS如何实现瀑布流布局,几种方案介绍

    本篇文章带大家了解一下瀑布流布局,介绍一下三种靠谱js方案,以及n种不靠谱css方案。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 本着实用精神,我们今天来分享一下瀑布流布局(昨天有个小兄弟问我怎么做,我找了半天没找到,啊原来写在内网了)。 演示地址: http://www.li…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信