JavaScript에서 속성별로 객체 배열 정렬

Aryan Tyagi 2022년1월15일 2021년10월18일

JavaScript JavaScript Array

이 기사에서는 객체의 속성 값을 기반으로 객체 배열을 정렬하는 방법에 대해 설명합니다.

JavaScript에서는 sort() 함수를 사용하여 객체 배열을 정렬합니다. sort() 함수는 배열의 요소를 숫자가 아닌 알파벳순으로 정렬하는 데 사용됩니다. 항목을 역순으로 가져오려면 reverse() 메서드를 사용할 수 있습니다.

그러나 기존의 sort() 함수는 일부 속성을 기반으로 객체 배열을 비교하는 데 때때로 뒤쳐질 수 있습니다. 따라서 sort() 함수와 함께 사용할 사용자 정의 비교 함수를 만들 수 있습니다. 이 메서드는 배열에 있는 항목의 속성을 비교합니다.

아래 예제는 자신의 비교 함수를 작성하는 방법을 보여줍니다.

let students = [
    {
        fname : "Rohan",
        lname : "Dalal",
        age : 19
    },

    {
        fname : "Zain",
        lname : "Ahmed",
        age : 17
    },

    {
        fname : "Anadi",
        lname : "Malhotra",
        age : 19
    }
];


function compare_lname( a, b )
  {
  if ( a.lname.toLowerCase() < b.lname.toLowerCase()){
    return -1;
  }
  if ( a.lname.toLowerCase() > b.lname.toLowerCase()){
    return 1;
  }
  return 0;
}

students.sort(compare_lname);
console.log(students)

출력:

[
  { fname: 'Zain', lname: 'Ahmed', age: 17 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 19 }
]

위의 예에서 먼저 lname을 소문자로 변환한 다음 문자열 비교에 따라 이름을 비교합니다. 객체의 lname을 기반으로 정렬된 객체 배열을 반환합니다. 내림차순의 경우 sort() 함수를 reverse()로 바꿀 수 있습니다.

문자열을 다루는 경우 비교 함수를 생성할 필요가 없고 localeCompare() 함수를 sort() 함수와 함께 사용하여 원하는 결과를 얻을 수 있습니다.

아래 코드를 참조하십시오.

let students = [
    {
        fname : "Rohan",
        lname : "Dalal",
        age : 19
    },

    {
        fname : "Zain",
        lname : "Ahmed",
        age : 21
    },

    {
        fname : "Anadi",
        lname : "Malhotra",
        age : 16
    }
];


students.sort((a, b) => a.lname.localeCompare(b.lname));
console.log(students);

출력:

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]

localeCompare()는 문자열에 대해서만 작동합니다. 우리는 이것을 숫자에 사용할 수 없습니다.

어떤 숫자 속성을 기반으로 정렬된 배열을 얻으려면 정렬 방법이 일반적으로 숫자와 함께 작동하지 않기 때문에 sort() 방법에 몇 가지 비교 기능을 제공해야 합니다.

아래 코드를 참조하십시오.

let students = [
    {
        fname : "Rohan",
        lname : "Dalal",
        age : 19
    },

    {
        fname : "Zain",
        lname : "Ahmed",
        age : 21
    },

    {
        fname : "Anadi",
        lname : "Malhotra",
        age : 16
    }
];

students.sort((a, b) => {
    return a.age - b.age;
});
console.log(students);

위의 예는 객체의 나이를 비교하고 이 나이를 기준으로 정렬합니다. 비교 기능은 한 줄에 불과하므로 sort() 메서드와 함께 직접 제공됩니다. 모든 것을 내림차순으로 가져오려면 reverse() 함수를 사용하십시오.

또는 비교 함수에서 순서를 이동하여 최종 출력을 내림차순으로 얻을 수도 있습니다.

예를 들어,

let students = [
    {
        fname : "Rohan",
        lname : "Dalal",
        age : 19
    },

    {
        fname : "Zain",
        lname : "Ahmed",
        age : 21
    },

    {
        fname : "Anadi",
        lname : "Malhotra",
        age : 16
    }
];

students.sort((a, b) => {
    return b.age - a.age;
});
console.log(students);

출력:

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]

관련 문장 - JavaScript Array