Programming/JavaScript & TypeScript

Javascript 배열 정렬, sort()

Bonita SY 2019. 10. 25. 19:26
728x90
반응형

설명)


- sort()는 배열의 요소를 적절한 위치에 정렬한 후 해당 배열 반환
- 정렬은 stable sort가 아닐 수 있음!!
- 기본 정렬 순서 : 문자열의 유니코드를 기준으로 정렬



구문)

 

arr.sort([compareFunction]) 


parameter)
compareFunction (Optional)
- 정렬 순서를 정의하는 함수
- 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 값에 따라 정렬

1. compareFunction이 제공되지 않으면 요소를 문자열로 변환 후 유니 코드 순서로 문자열을 비교하여 정렬
ex) "바나나"는 "체리"앞에 옵니다.
       숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에 옵니다.

2. compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,
    -> compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 index로 정렬
        즉, a가 먼저옵니다.
    -> compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.
        ※ 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
    -> compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 정렬
    -> compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환
        일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.


return value)
- 정렬한 배열
- 원래 배열이 정렬되는 것, 복사본이 만들어지는 것이 아닙니다.



예제)


기본 정렬 - 유니코드 기반 오름차순

var numberArray = [40, 1, 5, 200];
numberArray.sort(); //1,200,40,5



문자 정렬

var stringArray = ['Blue', 'Humpback', 'Beluga'];


- 오름차순

stringArray.sort((a, b) => a.localeCompare(b));


- 내림차순

stringArray.sort((a, b) => b.localeCompare(a));



숫자 정렬

var numberArray = [40, 1, 5, 200];


- 오름차순

numberArray.sort((a, b) => {
	return a - b;
});


- 내림차순

numberArray.sort((a, b) => {
	return b - a;
});



객체 정렬 - 해당 속성 중 하나의 값을 기준으로 정렬

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
]; //name 기준 정렬


- 오름차순

items.sort((a, b) => {
	return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});


- 내림차순

items.sort((a, b) => {
	return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
});

 

 


출처)
- https://www.30secondsofcode.org/blog/s/js-array-sorting-shorthand

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

728x90
반응형