JS array object - sort by date object, sort by time in ascending or descending order
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 date、Sort by Chinese initials、Sort 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:
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
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:
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: