[javaScript]객체 배열 정렬하기

javaScript 배열에는 종종 객체도 포함된다.

const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

 

객체에 다른 데이터 유형의 속성이 있더라도 이 sort() 메서드를 사용해서 배열을 정렬할 수 있다.

 

해결책은 속성 값을 비교하는 비교 함수를 작성하는 것이다.

 

cars.sort(function(a, b){return a.year - b.year});

 

<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

cars.sort(function(a, b){return a.year - b.year});
displayCars();

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

실행결과

Saab 2001
BMW 2010
Volvo 2016

 

year 기준으로 오름 차순 정렬

 

 

문자열 속성 비교하기

문자열 속성을 비교하는 것은 조금 더 복잡하다.

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

 

<button onclick="myFunction()">Sort</button> //2.버튼 클릭하면 myFunction() 함수 실행
<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars(); //1.displayCars() 함수를 실행해서 현재 순서대로 속성 출력

function myFunction() {
  cars.sort(function(a, b){
    let x = a.type.toLowerCase();//배열의 type속성을 소문자로 변경
    let y = b.type.toLowerCase();//다음 배열의 type 속성 소문자로 변경
    if (x < y) {return -1;} // x가 y보다 작으면 -1(음수)호출
    if (x > y) {return 1;} //x가 y보다 크면 1(양수)호출
    return 0; //그 외는 0출력
  });
  displayCars();
} // 알파벳을 비교해서 음수,0,양수에 따라서 결과가 음수이면 a - b 양수이면 b - a 이런식으로 정렬된다.

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

 

Sort 버튼 클릭 시 실행결과

BMW 2010
Saab 2001
Volvo 2016

 

 

 

 

참고 : https://www.w3schools.com/js/js_array_sort.asp