Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript

Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript

 

Javascript 에서 모든 객체의 정렬 방법을 알아보겠습니다.

기본적으로 배열에서는 sort라는 정렬 메서드를 제공합니다. 

 

sort 문법

Array.sort([compareFunction]);

 

sort 메소드는 기준이 되는 배열을 복사해서 정렬하는 것이 아니라 원본 데이터가 변경됩니다.

compareFunction은 생략이 가능하며, 생략할 경우 배열의 값의 유니코드 코드 포인트 값에 따라 정렬됩니다.

기본적으로 오름차순으로 정렬되며(ASC) 내림차순으로 정렬할 때는 compareFunction을 활용합니다.

---

숫자로 이루어진 배열의 오름차순 정렬

const numArray = [3, 5, 1, 4, 2];
numArray.sort();
console.log(numArray); /* [1, 2, 3, 4, 5] */

 

주의!

compareFunction을 사용하지 않은 정렬은 유니코드 코드 포인트 값에 따라 정렬되기 때문에 원치 않은 결과를 가져올 수 있습니다. compareFunction을 사용하도록 합니다.

compareFunction(a, b) 의 리턴값이 음수인경우 a를 b보다 낮은 index로 설정합니다. 양수인 경우 반대. 0의 경우 변화 없음.

const numArray = [3, 5, 1, 4, 2, 10, 11, 100];
numArray.sort();
console.log(numArray); /* [1, 10, 100, 11, 2, 3, 4, 5] */
numArray.sort(function(a, b){
    return a - b;
});
console.log(numArray); /* [1, 2, 3, 4, 5, 10, 11, 100] */

---

숫자로 이루어진 배열의 내림차순 정렬

const numArray = [3, 5, 1, 4, 2];
numArray.sort(function(a, b){
    return b - a;
});
console.log(numArray); /* [5, 4, 3, 2, 1] */

 

한글로 이루어진 배열의 오름차순 정렬

한글의 정렬은 localeCompare 메소드를 사용합니다.

localeCompare 메소드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴하는 메소드 입니다.

 

localeCompare 문법

기준문자열.localeCompare(비교문자열[, locales[,옵션]]);

locales[옵션]은 생략 가능합니다.

옵션에 대한 자세한 설명은 아래의 Link를 참고하세요!

Link : http://www.devdic.com/javascript/refer/native/method:1379/localeCompare()

 

 

const korArray = ["나", "가", "라", "다", "마"];
korArray.sort(function(a, b){
    return a.localeCompare(b);
});
console.log(korArray); /* ['가', '나', '다', '라', '마'] */

---

한글로 이루어진 배열의 내림차순 정렬

 

const korArray = ["나", "가", "라", "다", "마"];
korArray.sort(function(a, b){
    return b.localeCompare(a);
});
console.log(korArray); /* ['마', '라', '다', '나', '가'] */

---

Object 키값으로 오름차순 정렬

Object의 정렬은 새로운 객체를 생성하는 방식으로 합니다.

Object.keys(); 메소드는 오브젝트의 키를 배열로 리턴해줍니다.

const obj = {
	d: "ddd",
	a: "aaa",
	c: "ccc",
	b: "bbb",
	e: "eee"
}
	
const newObj = {};
Object.keys(obj).sort().forEach(function(key){
	newObj[key] = obj[key];
});
console.log(newObj); /* {a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee'} */

---

Object 키값으로 내림차순 정렬

 

const obj = {
	d: "ddd",
	a: "aaa",
	c: "ccc",
	b: "bbb",
	e: "eee"
}
	
const newObj = {};
Object.keys(obj).sort(function(a, b){
	return b.localeCompare(a);
}).forEach(function(key){
	newObj[key] = obj[key];
});
console.log(newObj); /* {e: 'eee', d: 'ddd', c: 'ccc', b: 'bbb', a: 'aaa'} */

 

Object value값으로 오름차순 정렬

Object.entries() 메소드는 Object의 key, value를 한 쌍의 배열로하여 2차원 배열을 리턴해줍니다.

자세한 사용법은 아래의 Link를 참고하세요!

 

Link : https://aljjabaegi.tistory.com/614

Javascript Object to Array, Array to Object 키, 값 추출

 

const obj = {
	d: "ddd",
	a: "aaa",
	c: "ccc",
	b: "bbb",
	e: "eee"
}
const newObj = {};
Object.entries(obj).sort().forEach(function(array){
	newObj[array.at(0)] = array.at(1);
});
console.log(newObj); /* {a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee'} */

 

Object value값으로 내림차순 정렬

 

const obj = {
	d: "ddd",
	a: "aaa",
	c: "ccc",
	b: "bbb",
	e: "eee"
}

const newObj = {};
Object.entries(obj).sort(function(a, b){
	return b.at(1).localeCompare(a.at(1));
}).forEach(function(array){
	newObj[array.at(0)] = array.at(1);
});
console.log(newObj); /* {e: 'eee', d: 'ddd', c: 'ccc', b: 'bbb', a: 'aaa'} */