JS array object - sort Date.parse() according to date, sort ascending or descending according to time localeCompare()

Scene recurrence

Sorting is very practical in projects, and it occurs very frequently, especially in the background management system , which requires us to display, process, and operate a large amount of data . generallyGet the array object from the background,ThenSort data in ascending or descending order according to one of the attributesprocessing. Starting from this article, we will introduce the three commonly used sorts——Sort by dateSort by Chinese initialsSort according to the first letter of English. These three sorts are used very frequently.

The following will give an example in detail-Sort by date and time

Encapsulates sorting methods for array objects

Encapsulation ideas are used a lot in projects, and good encapsulation can greatly reduce the amount of code and improve the reuse rate.
First, let's understand the simplestSorting method based on numerical sizeencapsulation.

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

Data sorted from largest to smallest:

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

After reading this simple size sorting, let's get to the point and sort by date.

Here we are divided into time and date mixed sorting (time and date in one parameter) and time and date sorted separately (Time and date correspond to two parameters

Sort by date and time objects

1. Mixed sorting by date and time

(1) Array content

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)Mixed sorting of dates using 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)))

Console sort results
insert image description here
insert image description here


The following is an example of separate sorting of date and time parameters

2. Sort by date and time respectively

1. Ascending order

1. Array content

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"}
];

method :sort()localeCompare()

  • sort is used for sorting, localeCompare is used for comparison
    insert image description here
    localeCompare should not be written as localCompare

2、key code: ( sort by time and date )

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

3、Console sort results
insert image description here

Two, descending order

Descending order only needs to exchange the positions of a and b,code show as below:

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

Console sort results
insert image description here


The next article will introduce the sorting of array objects according to the Chinese initials~
Interested friends can subscribe to this column to facilitate follow-up learning~
Friends who find this article useful can like it ➕ bookmark ➕ follow it~

Guess you like

Origin blog.csdn.net/XSL_HR/article/details/128579840