JavaScript

정렬 객체정렬 sort reverse *localeCompare

MHY.PRO 2022. 7. 7. 10:09

예제를 통해 정렬함수를 알아보자. 

 

숫자 데이터 정렬

배열안에 있는 숫자들을 정렬해보겠다. 

여기서 문제는 그냥 arrData.sort() 해주면 안된다. sort() 함수만 호출했을경우 문자열 형태를 비교하게되어 숫자는 정렬되지않는다. 

sort()함수안에 콜백함수를 인자로 넣어 return을 해준다.  a , b가 배열안에있는 데이터들이 차례대로들어와서 비교를하게된다. a - b에서 위 데이터로 비교를하면 맨처음 a=4 , b=3이온다. a-b를 해주면 1이나온다. a가 더 크기때문에 a는 뒤로밀리게되며 a와 b의 자리가 바뀔 것이다. 이런형태이다. 

그렇다면 내림차순정렬은 어떻게할 것 인가?

정말 간단하다 오름차순정렬을 return a-b를 했다면 return b-a를 해준다면 서로의값이 달라지며 위치도 거꾸로 되지않겠나? 코드로 알아보자.

위 사진 코드의 출력

내림차순이 잘 되는걸 볼 수 있다.

 

문자열 데이터 정렬

sort()함수와 reverse()함수가 있기때문에 그냥 가져다 쓰면된다 문자열은 뭐 건드릴 필요가 없는듯 여기서 reverse()함수는 정렬하는 함수가아닌 거꾸로 뒤집는 함수이다. 

* 오름차순 -> arrData.sort() 

* 내림차순 -> arrData.sort().reverse()

 

객체 데이터 정렬

이번엔 객체데이터를 정렬해보자.

배열속 객체

이 데이터를 정렬해보자 정렬기준은 name으로 오름차순으로 정렬 해보겠다.

다른 데이터와다른점은 localCompare함수를 사용했다는점이다. 이함수는 비교를 해주는 함수이다. if(a.name > b.name){ return = -1} 이런식으로 직접 음수,양수를 넘겨 정렬을 하기도하는데 localCompare함수를 사용하면 편하게 비교를 할 수있다. 

객체 내림차순으로정렬 

a.name.lacalCompare(b.name) -> b.name.localCompare(a.name)으로만 바꿔줬다. 이렇게 객채를 쉽게 정렬 할 수 있다