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)))

콘솔 정렬 결과
여기에 이미지 설명 삽입
여기에 이미지 설명 삽입


다음은 날짜 및 시간 매개변수를 별도로 정렬한 예입니다.

2. 날짜와 시간별로 각각 정렬

1. 오름차순

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는 비교에 사용됩니다.
    여기에 이미지 설명 삽입
    localeCompare는 localCompare로 작성하면 안 됩니다.

2,키 코드: ( 시간 및 날짜별로 정렬 )

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

삼,콘솔 정렬 결과
여기에 이미지 설명 삽입

둘, 내림차순

내림차순은 a와 b의 위치만 바꾸면 됩니다., 아래와 같이 코드 쇼:

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

콘솔 정렬 결과
여기에 이미지 설명 삽입


다음 글에서는 한자 이니셜에 따른 배열 객체의 정렬에 대해 소개하겠습니다~
관심 있는 친구들은 후속 학습을 위해 이 칼럼을 구독할 수 있습니다~
이 글이 유익하다고 생각하는 친구들은 좋아요 ➕ 북마크 ➕ 팔로우 해주세요~

추천

출처blog.csdn.net/XSL_HR/article/details/128579840