JS의 내장 함수 sort()를 이용하면 간편하게 배열을 정렬할 수 있다.
문자열 배열
문자열 배열의 경우 sort()를 사용하면 오름차순으로 정렬된다.
const arr = ["ab", "a", "dad", "c"];
console.log(arr.sort());
//결과: ['a', 'ab', 'c', 'dad']
내림차순으로 정렬하고 싶은 경우 직접 비교 함수를 전달해 주거나 reverse()를 사용하면 된다.
const arr = ["ab", "a", "dad", "c"];
console.log(
arr.sort((a, b) => {
if (a > b) return -1;
else if (b > a) return 1;
else return 0;
})
);
console.log(arr.sort().reverse());
//결과: ['dad', 'c', 'ab', 'a']
숫자 배열
sort()는 배열 요소를 문자열로 변환하여 정렬하기 때문에, 다음과 같이 숫자 배열을 정렬하고자 한다면 원하는 결과를 얻을 수 없다.
const arr = [22, 11, 2, 7, 1, 4];
console.log(arr.sort());
//결과: [1, 11, 2, 22, 4, 7]
문자열 "11"은 문자열 "2"보다 작기 때문이다.
따라서 숫자를 비교하는 함수를 직접 전달해 주어야 한다.
const arr = [22, 11, 2, 7, 1, 4];
//오름차순
console.log(arr.sort((a, b) => a - b));
//결과: [1, 2, 4, 7, 11, 22]
//내림차순
console.log(arr.sort((a, b) => b - a));
//결과: [22, 11, 7, 4, 2, 1]
728x90
'JS & CSS & HTML' 카테고리의 다른 글
JS e.target vs e.currentTarget (미스터리 해결기...) (1) | 2023.07.20 |
---|---|
contentEditable로 수정 기능 구현하기 (0) | 2023.07.17 |
JS Image preloading (0) | 2022.05.31 |
CSS transform: translate vs. absolute positioning (0) | 2022.05.31 |
CSS line-height (0) | 2022.05.03 |