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

这篇具有很好参考价值的文章主要介绍了JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景复现

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

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

封装数组对象的排序方法

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

// 封装数组对象排序方法
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)))

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


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

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用于比较
    JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()
    localeCompare不要写成localCompare

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

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

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

二、降序

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

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

控制台排序结果
JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()文章来源地址https://www.toymoban.com/news/detail-429283.html


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

到了这里,关于JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包