当前位置:首页 » 《关注互联网》 » 正文

JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()

7 人参与  2024年03月31日 18:25  分类 : 《关注互联网》  评论

点击全文阅读


JS数组对象——根据日期对象进行排序,按照时间进行升序或降序排序

场景复现封装数组对象的排序方法根据日期和时间对象排序1、按照日期时间混合排序2、分别按照日期和时间进行排序

场景复现

排序在项目中非常实用,出现频率极高,尤其是后台管理系统,需要我们对大量的数据进行展示、处理、操作。一般都是从后台获取到数组对象,然后根据其中的一个属性对数据进行升序或者降序的处理。从本期文章开始,将分别介绍常用的三种排序——根据日期排序、根据中文首字母排序、根据英文首字母排序。这三种排序的使用频率非常高。

下面将举例详细介绍——按日期和时间顺序进行排序!

封装数组对象的排序方法

封装思想在项目中用到的非常多,封装用的好可以在很大程度上减少代码量,提高复用率。
首先我们先了解一下最简单的根据数字大小排序的排序方法封装。

// 封装数组对象排序方法compare(prop) {    return function(a, b) {        return b[prop] - a[prop]  // 降序        //  return a[prop] - b[prop]  // 升序    }},
// 比如arrList对象中根据score属性进行从大到小的排序const arrList = [  {id: 1, value : "value1", score: 97},  {id: 2, value : "value2", score: 126, },  {id: 3, value : "value3", score: 60, },];arrList = arrList.sort(arrList.compare('score'))

从大到小排序后的数据:

{id: 2, value : "value2", score: 126, },{id: 1, value : "value1", score: 97},{id: 3, value : "value3", score: 60, },

看完这个简单的大小排序后,我们切入正题,按照日期进行排序。

这里我们分为时间和日期混合排序(时间和日期在一个参数内)以及时间和日期分别排序(时间和日期对应两个参数)

根据日期和时间对象排序

1、按照日期时间混合排序

(1)数组内容

let data = [    {id: 2, time: '2019-04-26 10:53:19'},{id: 4, time: '2019-04-26 10:51:19'}, {id: 1, time: '2019-04-26 11:04:32'}, {id: 3, time: '2019-04-26 11:05:32'}]

(2)利用Date.parse()对日期进行混合排序

// property是你需要排序传入的key,bol为true时是升序,false为降序function dateData(property, bol) {return function(a, b) {var value1 = a[property];var value2 = b[property];if (bol) {// 升序return Date.parse(value1) - Date.parse(value2);} else {// 降序return Date.parse(value2) - Date.parse(value1)}}}console.log(data.sort(dateData("time", true)))console.log(data.sort(dateData("time", false)))

控制台排序结果:
在这里插入图片描述
在这里插入图片描述


下面介绍日期和时间两个参数分开排序的例子

2、分别按照日期和时间进行排序

一、升序

1、数组内容

const arr = [  {id: 1, value : "value1", date: "2018-08-08", time: "15:27:17"},  {id: 2, value : "value2", date: "2018-08-09", time: "12:27:17"},  {id: 3, value : "value3", date: "2018-08-10", time: "17:27:17"},  {id: 4, value : "value4", date: "2018-08-10", time: "01:27:17"},  {id: 5, value : "value5", date: "2018-08-10", time: "09:27:17"},  {id: 6, value : "value6", date: "2018-08-10", time: "23:27:17"},  {id: 7, value : "value7", date: "2018-08-10", time: "16:27:17"},  {id: 8, value : "value8", date: "2018-08-11", time: "10:27:17"}];

方法:sort()、localeCompare()

sort用于排序,localeCompare用于比较
在这里插入图片描述
localeCompare不要写成localCompare

2、关键代码:(根据时间和日期进行排序

// 按照时间先后顺序进行排序arr.sort((a, b) => a.date.localeCompare(b.date) || a.time.localeCompare(b.time));console.log(arr);// 包括了时间的比较,同时也包括了日期的比较

3、控制台排序结果:
在这里插入图片描述

二、降序

降序只需要将a和b的位置交换即可,代码如下:

arr.sort((a, b) => b.date.localeCompare(a.date) || b.time.localeCompare(a.time));console.log(arr);

控制台排序结果:
在这里插入图片描述


下期文章将介绍根据中文首字母对数组对象进行排序~ 感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/88625.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 祖母寿宴,侯府冒牌嫡女被打脸了(沈屿安秦秀婉)阅读 -
  • 《雕花锦年,昭都旧梦》(裴辞鹤昭都)完结版小说全文免费阅读_最新热门小说《雕花锦年,昭都旧梦》(裴辞鹤昭都) -
  • 郊区41号(许洛竹王云云)完整版免费阅读_最新全本小说郊区41号(许洛竹王云云) -
  • 负我情深几许(白诗茵陆司宴)完结版小说阅读_最热门小说排行榜负我情深几许白诗茵陆司宴 -
  • 九胞胎孕妇赖上我萱萱蓉蓉免费阅读全文_免费小说在线看九胞胎孕妇赖上我萱萱蓉蓉 -
  • 为保白月光,侯爷拿我抵了债(谢景安花田)小说完结版_完结版小说全文免费阅读为保白月光,侯爷拿我抵了债谢景安花田 -
  • 陆望程映川上官硕《我的阿爹是带攻略系统的替身》最新章节阅读_(我的阿爹是带攻略系统的替身)全章节免费在线阅读陆望程映川上官硕
  • 郑雅琴魏旭明免费阅读_郑雅琴魏旭明小说全文阅读笔趣阁
  • 头条热门小说《乔书意贺宴临(乔书意贺宴临)》乔书意贺宴临(全集完整小说大结局)全文阅读笔趣阁
  • 完结好看小说跨年夜,老婆初恋送儿子故意出车祸_沈月柔林瀚枫完结的小说免费阅读推荐
  • 热推《郑雅琴魏旭明》郑雅琴魏旭明~小说全文阅读~完本【已完结】笔趣阁
  • 《你的遗憾与我无关》宋怀川冯洛洛无弹窗小说免费阅读_免费小说大全《你的遗憾与我无关》宋怀川冯洛洛 -

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1