이 자습서에서는 sort() 메서드를 사용하는 방법을 배웁니다.

sort()는 무엇을 합니까?

짐작하셨겠지만 sort() 메서드는 배열의 요소를 제자리에서 정렬하고 정렬된 배열을 반환합니다.

좋아, 하지만 제자리에 있다는 게 무슨 뜻이야, 바질? 간단히 말해서, 제자리라는 것은 새 배열이 생성되는 대신 원래 배열이 업데이트됨을 의미합니다.

한 번 보자...

통사론

// Function-less:
array.sort();

// Compare function:
array.sort(compareFunction);

// In-line compare function:
array.sort(function compareFunction(firstEl, secondEl) { ... });

// Arrow function:
array.sort((firstEl, secondEl) => { ... });

정렬()은 어떻게 작동합니까?

기본적으로 sort() 메서드는 배열 요소를 오름차순(즉, 가장 작은 것부터 큰 것)으로 정렬하지만 비교 함수를 사용하여 값을 오름차순(위) 또는 내림차순(아래)으로 알파벳순으로 정렬하거나 정렬할 수 있습니다.

비교 기능

선택적compareFunction 매개변수는 대체 정렬 순서를 정의하는 함수를 지정합니다.

함수는 두 개의 매개변수( firstEl [비교를 위한 첫 번째 요소]와 secondEl [비교를 위한 두 번째 요소])를 취해야 하며 첫 번째 매개변수가 먼저 와야 하는 경우 음수를 반환하고 두 번째 매개변수가 있어야 하는 경우 양수를 반환해야 합니다. 먼저 오고 두 매개변수가 같으면 0입니다(원래 순서 유지).

통사론:

array.sort(function compareFunction(firstEl, secondEl) {
  if (firstEl is less than secondEl) {
    return -1;
  }
  else if (firstEl is greater than secondEl) {
    return 1;
  }
  // firstEl is equal to secondEl
  return 0;
});

예시

객체 배열이 있다고 가정해 보겠습니다.

let pokemon = [
    { "id": 4, "name": "Charmander", "type": "Fire" },
    { "id": 25, "name": "Pikachu", "type": "Electric" },
    { "id": 59, "name": "Arcanine", "type": "Fire" },
    { "id": 89, "name": "Muk", "type": "Poison" },
    { "id": 135, "name": "Jolteon", "type": "Electric" }
];

현재 포켓몬은 국가 Pokedex 번호(또는 id )로 정렬됩니다. 그러나 우리는 그것들을 type 기준으로 정렬하고 싶습니다.

이를 위해 각 객체의 type 속성을 비교하는 비교 함수를 만들어 보겠습니다.

pokemon.sort((firstEl, secondEl) => {
    if (firstEl.type.toLowerCase() < secondEl.type.toLowerCase()) {
        return -1;
    } else if (firstEl.type.toLowerCase() > secondEl.type.toLowerCase()) {
        return 1;
    } else {
        return 0;
    }
});

산출:

[
  { id: 25, name: 'Pikachu', type: 'Electric' },
  { id: 135, name: 'Jolteon', type: 'Electric' },
  { id: 4, name: 'Charmander', type: 'Fire' },
  { id: 59, name: 'Arcanine', type: 'Fire' },
  { id: 89, name: 'Muk', type: 'Poison' }
]

이제 배열의 개체는 type 속성을 기준으로 알파벳순으로 정렬됩니다.

그것만큼 쉽습니다!

중요한!

sort() 메서드는 먼저 요소를 문자열로 변환한 다음 문자열을 비교하여 순서를 결정합니다.

그래서 무엇을 물어?

이 값 배열을 살펴보겠습니다.

let numbers = [1, 123, 12, 21, 77, 41];

비교 함수를 지정하지 않고 위의 배열( sort() )에서 numbers 메서드를 사용하는 경우 다음 출력을 얻을 수 있습니다.

[ 1, 12, 123, 21, 41, 77 ]

안맞아보이네요...

알아두기: 숫자 값을 정렬할 때 비교 기능을 지정해야 합니다. 예를 들어:

numbers.sort((a, b) => a - b));
// Output: [ 1, 12, 21, 41, 77, 123 ]

자원

sort() 메서드 사용에 대한 자세한 내용과 예는 MDN Web Docs을 참조하십시오.