[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)

1️⃣ sort() 함수 사용

arr.sort([compareFunction])

 compareFunction : 정렬 순서를 정의하는 함수

이 값이 생략될 경우 배열의 요소가 문자열로 취급되어 유니코드 값 순서대로 정렬된다.

ex. [1, 2, 3, 12, 23] ➡️ [1, 12, 2, 23, 3]

 

* 사용 시 원본 배열 자체가 변경된다.

 

arr = ['oh', 'My', 'b', 'Boy'];

arr.sort();
//Boy, My, b, oh

 

2️⃣ 비교 연산자 사용하기

자바스크립트에서는 비교연산자를 이용하여 문자열을 비교할 수 있다.

//오름차순
arr.sort((a, b) => a > b ? 1 : -1);

//내림차순
arr.sort((a, b) => a > b ? -1 : 1);

 

3️⃣ localeCampare() 메소드

문자열의 사전상 순서에서 해당 문자가 앞에 있는지, 뒤에 있는지, 같은지 판단하여 -1, 1, 0의 반환 값을 주는 메서드

'a'.localeCompare('c');
//-1

let str = ['a', 'z', 'c', 'y'];
str.sort((a, b) => a.localeCompare(b));
//['a', 'c', 'y', 'z']

// 오름차순
arr.sort((a, b) ⇒ a.localeCompare(b));

// 내림차순
arr.sort((a, b) ⇒ b.localeCompare(a));

 

4️⃣ 특정값 정렬 기준 만들기

특정한 정렬의 기준을 만들어서 정렬할 수 있다.

//정렬 기준
const orderBy = ['회장', '사장', '부장', '과장', '사원'];
const data = ['사장', '사원', '회장', '부장', '과장', '사원'];

data.sort((a, b) => orderBy.indexOf(a) - orderBy.indexOf(b));

 

 

---

 

1️⃣ 숫자 정렬하기

 

1️⃣-1️⃣ 숫자 오름차순 정렬하기

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

arr.sort((a, b) => a - b);

1️⃣-2️⃣ 숫자 내림차순 정렬하기

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

arr.sort((a, b) => b - a);

 

 

2️⃣ 문자 정렬하기

 

2️⃣-1️⃣ 문자 오름차순 정렬하기

arr = ['oh', 'My', 'b', 'Boy'];

arr.sort();
//Boy, My, b, oh

2️⃣-2️⃣ 문자 내림차순 정렬하기

arr = ['oh', 'My', 'b', 'Boy'];

arr.sort(function(a, b) {
	if (a < b) return 1;
    if (a > b) return -1;
    if (a === b) return 0;
});
//oh, b, My, Boy

 

 

* 대소문자 구분 없이 오름차순/내림차순으로 정렬하기 위해서는

문자열 비교 시 모두 대문자/소문자로 변환하여 비교해야 한다.

[Javascript] 문자열 대소문자 변경 (toUpperCase(), toLowerCase()

 

2️⃣-3️⃣ 문자 오름차순 정렬하기 (대소문자 구분 x)

const arr = ['oh', 'My', 'b', 'Boy'];

arr.sort(function(a, b) {
	let upperA = a.toUpperCase();
    ler upperB = b.toUpperCase();
    
    if (upperA > upperB) return 1;
    if (upperA < upperB) return -1;
    if (upperA === upperB) return 0;
});

//b, Boy, My, oh

2️⃣-4️⃣ 문자 내림차순 정렬하기 (대소문자 구분 x)

const arr = ['oh', 'My', 'b', 'Boy'];

arr.sort(function(a, b) {
	let upperA = a.toUpperCase();
    ler upperB = b.toUpperCase();
    
    if (upperA > upperB) return -1;
    if (upperA < upperB) return 1;
    if (upperA === upperB) return 0;
});
//oh, My, Boy, b

 

 

3️⃣객체 정렬하기

정렬 시키는 기준을 객체의 value 값으로 잡아서 비교한다.

const data = [
	{ name: 'cherry', color: "빨간색" },
    { name: 'banana', color: "노란색" },
    { name: 'orange', color: "주황색" }
];

//sort함수
data.sort(function(a, b) {
	return a.name - b.name;
});

// 비교연산자
[...data].sort((a, b) => a.name > b.name ? 1 : -1);

// localeCompare 메서드
[...data].sort((a, b) => a.name.localeCompare(b.name));