IMAGINE'S BLOG IMAGINE'S BLOG
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)

peng

平平无奇的web前端开发一枚
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)
  • JavaScript

    • javascript 之 this 指向问题
    • JS循环遍历方法
    • 前端常用公共方法工具类
    • JS声明提升
    • JS合并数组对象中key值相同的数据
    • 数组对象求和
    • 前端路由实现
    • Promise(一):Promise 认识
    • Promise(二):手动实现一个 Promise
    • Promise(三):拓展方法实现
    • JS forEach踩坑
    • ES6-ES12 特性
    • async/await
    • JavaScript 数组去重
    • js对象排序
      • 前言
      • 排序
    • js if/else 语句优化策略
    • js深拷贝
    • 正则表达式校验
    • js笛卡尔积
    • Axios 封装
  • 框架扩展

  • 前端乱炖
  • JavaScript
peng
2022-09-05
目录

js对象排序

# 前言

记录一次在项目开发中遇到的情况。后台返回一个排好序的对象作为折线图的数据,按要求根据日期顺序进行展示。首先要清楚一点是 js 对象是无序的,即使后台排好了序,还是会错乱,所以需要在前端渲染前做一遍排序操作。

#

# 排序

  • js 对象是没办法直接进行排序的,可以针对对象的某个属性或键值来排序,最后将对应的 value 取出来。
let obj = {
20210601:{date:20210601,name:'a',age:22},
20210604:{date:20210604,name:'b',age:20},
20210602:{date:20210602,name:'c',age:18},
20210603:{date:20210603,name:'d',age:26}
}

let arr = []

// 将key值排序
let sortKeys = Object.keys(obj).sort((a,b)=>{
return obj[a] - obj[b]
})

console.log(sortKeys)   //  ["20210601", "20210602", "20210603", "20210604"]

// 循环排列好的 key, 组成一个新的数组
    for (var index in sortKeys) {
      arr.push(obj[sortKeys[index]])
    }

console.log(arr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#JavaScript
上次更新: 2022/09/06, 10:30:04
JavaScript 数组去重
js if/else 语句优化策略

← JavaScript 数组去重 js if/else 语句优化策略→

最近更新
01
Axios 封装
09-06
02
MySQL数据库常用操作
09-06
03
解决element表格数据量过大导致页面渲染缓慢、卡顿问题
09-06
更多文章>
Theme by Vdoing | Copyright © 2020-2024 peng | IMAGINE
image | imgloc.com
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式