JS-Object无序问题

news2024/11/8 6:53:11

1、 背景

在开发图表功能时,由于历史原因,后端返回的图表数据如下:
在这里插入图片描述
是对象类型,键为日期,值为日期和当天日期的值。在H5端、微信小程序端运行结果正常,结果到了百度小程序突然发现,这个值的顺序是混乱的,时间有时前面的日期在后面,后面的日期在前面(百度小程序ide正常,真机预览时会出现问题)。

2、原因

排查问题时发现,处理后的x轴数据和对应的值在百度小程序是混乱的,所以造成数据错乱。由于object是无序的,不同平台根据处理方式的不同,可能会造成这个错误的原因。

3、解决方式

我们可以通过Object.values方式将这个转换成数组的形式,之后循环这个数组,根据time字段进行sort排序(如果sort排序不生效,可以将time的值先转换成数字形式进行比较),之后按照这个顺序返回新的数组,结果就是正确的了。

4、潜在问题

这种方式可以对数组进行排序,但是图表数据是有一定跨度的,只要有跨度,就会出现新年旧年交替的情况,例如今年的十二月份和明年的一月份,如果单纯的比较大小,此时的返回结果可能是有问题的,我们可以通过判断,如果这个返回时间列表中,既有12月份又有1月份,可以将12月份数据提取出来,1月份数据提取出来。通过sort方式将12月份和1月份分别排序,然后将12月份数据和1月份排序后的数据分别推到新的数组中,可以通过flat将数组展平,这样就可以啦。

但这并不是最优解,如果图表所展示的时间范围是一年的话,那么上述的这个方法也不能完全解决,因为会出现两个12月份日期的情况,此时还是需要将数据以数组形式返回(如果有其他的方法,欢迎大家在评论区传授一下啦,感谢感谢)

5、代码思路

  • 通过Object.values 将源对象数据转换成数组
  • 过滤出12月份的数据A
  • 过滤出1月份数据(若时间范围长,也可以是1月份至11月份数据)B
  • 若A/B同时存在,则分别处理两个数组数据,先排序再合并。否则,则正常进行排序即可

6、代码示例

    // 根据时间进行排序
    sortWithTime(toArray) {
      let newArray = toArray.map((f) => {
        return {
          ...f,
          time: Number(f.time.replace("-", "")),
        };
      });
      newArray.sort((a, b) => a.time - b.time);
      return newArray;
    },
    // 百度排序方式与其他平台不同,单独处理
    solveBDSort(list_data) { // 源数据
      let y_list = [];
      let toArray = Object.values(list_data); // 将对象数据转换成数组
      let has12 = toArray.filter((f) => { // 过滤出12月份数据
        return f.time.slice(0, 2).includes("12");
      });
      let has012 = toArray.filter((f) => {
        return f.time.slice(0, 2).includes("01") || f.time.slice(0, 2).includes("02")
      })
      let finalConcat = [];
      if (has12.length && has012.length) {
        // 12月、1月 旧年新年排序
        finalConcat.push(this.sortWithTime(has12));
        finalConcat.push(this.sortWithTime(has012));
      } else {
        // 普通排序
        finalConcat.push(this.sortWithTime(toArray));
      }
      let flatArr = finalConcat.flat();
      y_list = flatArr.map((m) => {
        return m.tem;
      });
      return y_list;
    },

如果有用,点个赞呗~

总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624502.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA2021.1.3版本lombok插件--代码爆红问题解决

最近,突然心血来潮将自己工作中开发使用的idea升级到2021.1.3版本,安装成功后,打开代码发现有关get、set方法全部爆红,不用想,肯定是Lombok插件问题,通过setting->plugin里面搜索Lombok居然不存在&#…

终于有人把Linux系统收发网络数据包的过程讲清楚了!

Linux 服务器收到网络数据包,需要经过哪些处理,一步步将数据传给应用进程的呢?应用进程发送数据包时,Linux 又是如何操作将数据包发送出去的呢?今天我们就来聊聊这个话题。 在准备好接收网络数据包之前,Lin…

Mysql数据库入门基础篇--sql语句简单使用

Mysql数据库入门基础篇--sql语句简单使用 🔻一、数据库创建、删除、选择1.1 🍃 create database 创建数据库1.2 🍃 使用 mysqladmin 创建数据库1.3 🍃 drop 命令删除数据库--一般不建议在数据库执行delete、drop等命令1.4 &#x…

redis入门学习

redis基本数据结构 redis的返回值 在设置一个key-value对的时候通常会返回ok告诉我们操作成功了,1代表成功,0代表失败,通常会根据返回值的不同处理不同的业务逻辑用redis.cn来查看命令 全局操作 flushdb清空内存数据库keys *展示所有存储…

第十八章:MySQL8其他新特性

第十八章:MySQL8其他新特性 18.1:MySQL8新特性概述 ​ MySQL从5.7版本直接跳跃发布了8.0版本 ,可见这是一个令人兴奋的里程碑版本。MySQL 8版本在功能上做了显著的改进与增强,开发者对MySQL的源代码进行了重构,最突出…

2023-06-08 Unity AssetBundle1——AB包介绍与使用

文章目录 一、AB 包介绍二、AB 包资源打包(一)导入 AB 包(二)将资源关联 AB 包(三)打包参数选项(四)打包结果(五)AB 包信息 三、加载 AB 包资源(一…

如何让访问者能更快地加载出你的网站?

​  在当今互联网时代,网站已成为人们获取信息、交流互动、进行商业活动等的主要场所之一。然而,由于网络环境的复杂性和不确定性,用户在访问网站时常常会遇到访问缓慢、卡顿等问题,从而影响了用户的使用体验。为了让用户更快地…

【数据结构】常见排序算法——快速排序的三种实现、 hoare版本、挖坑法、前后指针版本

文章目录 1.常见排序2.快速排序2.1hoare版本2.2快速排序优化2.3挖坑法实现2.4前后指针实现 1.常见排序 2.快速排序 快速排序(Quick Sort) 是一种常见的排序算法,也是一种基于分治算法的排序。该算法的基本思想是将一个数据集分成两个子集&…

实验四、shell编程

一、实验目的 1.了解shell的特点和主要种类。 2.掌握 shel1 脚本的建立和执行方式。 3.掌握bash的基本语法。 4.学会编写shell 脚本。 二、实验内容 shell 脚本的建立和执行。历史命令和别名定义。shell变量和位置参数、环境变量。bash的特殊字符。一般控制结构。算术运算及…

Redis事务和管道

一、Redis事务 1、定义 可以一次执行多个命令,本质上是一组命令的集合。一个事务中的所有命令都会序列化,按顺序的串行化执行而不会被其他命令插入,不能加塞。 2、作用 一个队列中,一次性、顺序性、排他性的执行一系列命令。 …

第Y3周:yolov5s.yaml文件解读

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊|接辅导、项目定制 ✅本周任务:将yolov5s网络模型中第4层的C3*2修改为C3*1,第6层的C3*3修改为C3*2。 简单介绍: YOLOv5配置了…

企业Wiki和知识库-SaaS产品运营指南

内部Wiki也叫做企业Wiki,是员工可以存储、共享和协作创作的地方,将企业内部员工知识共享集中到一个地方,并且相关内容与其他团队成员协作完成,它可以包含企业内部的各种知识,从操作指南到培训手册,再到客户…

RabbitMQ - 延迟队列

RabbitMQ - 延迟队列 延迟队列介绍RabbitMQ 中的 TTL整合 springboot队列 TTL延时队列TTL优化Rabbitmq 插件实现延迟队列总结 延迟队列介绍 延迟队列概念: 延时队列,队列内部是有序的,最重要的特性就体现在它的延时属性上,延时队列中的元素是…

《Lua程序设计》--学习3

输入输出 简单I/O模型 Lua 文件 I/O | 菜鸟教程 (runoob.com) 暂留 补充知识 局部变量和代码块 Lua语言中的变量在默认情况下是全局变量,所有的局部变量在使用前必须声明 在交互模式中,每一行代码就是一个代码段(除非不是一条完整的命…

spark的高阶用法

广播变量broadcast 使用场景:本地集合变量和分布式变量(rdd)进行关联的时候使用 优点:1.可以节省io操作.2.减少executor的内存占用 #定义 map_list {(1,dawang,22),(2,xiaogou,333).....} broadcast sc..broadcast(map_list) #使用 for i in broadcast.value:print(i)累加器a…

【TA100 】 LDR与HDR

一、LDR和HDR的基本概念 1.HDR 、LDR、动态范围 ● Dynamic Range(动态范围)最高亮度/最低亮度 ● HDR High Dynamic Range ● LDR Low Dynamic Range ● ToneMapping:将超高的动态范围(HDR)转换到我们日常显示的屏…

指定英国名校|社会科学老师喜赴曼彻斯特大学访学研究

社会科学较理工科专业申请访问学者的难度更大,何况M老师还有学校、专业、时间等要求。最终我们为其落实了世界50强名校—曼彻斯特大学全球发展研究所的职位,专业方向高度契合。在对方行政办理流程时遇到一些阻力,好在有惊无险地完成了全部流程…

Simulink尝试双脉冲实验验证MOSFET二极管反向恢复的特性(附仿真模型)

目录 前言 双脉冲实验 Simulink仿真对比 总结 前言 最近在做交错串联的图腾柱单相PFC的项目,基于模型的开发,想要在仿真上实现过零点尖峰电流产生并通过软启动进行抑制,把整个过程都通过仿真实现出来,在这个过程中尝试了Simul…

深入 Synchroized 原理,从入门到精通

目录 一、倔强青铜 1.1 多线程一定快吗? 1.2 上下文切换 1.3 测试上下文切换次数 1.4 Java内存模型 1.5 主内存与工作内存之间的数据交互过程 二、秩序白银 2.1 多线程带来的可见性问题 2.2 多线程带来的原子性问题 2.3 多线程带来的有序性问题 三、荣耀…

Yolov5涨点神器:RIFormerBlock助力检测|CVPR2023|RIFormer:无需TokenMixer也能达成SOTA性能的极简ViT架构

1.RIFormer介绍 论文:https://arxiv.org/pdf/2304.05659.pdf 本文基于重参数机制提出了RepIdentityFormer方案以研究无Token Mixer的架构体系。紧接着,作者改进了学习架构以打破无Token Mixer架构的局限性并总结了优化策略。搭配上所提优化策略后,本文构建了一种极致简单且…