퍼블리싱/html css js
[Javascript] sort() : 내림차순 / 오름차순
임고미
2020. 9. 24. 16:08
728x90
300x250
arr.sort([compareFunction]) |
반환 : 정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다.
compareFunction :
정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.
1.숫자 정렬
var number = [ 100, 30, 35, 110, 25, 73, 10 ];
var numberString = [ "100", "30", "35", "110", "25", "73", "10"];
function compare ( a , b ) { return a - b; }
number.sort ( compare );(O)
numberString.sort ( compare );(O)
2. 문자와 숫자 정렬
1) 가나다 순
var korean = [ "퍼블리셔", "디자이너", "개발자", "프론트앤드" ];
var english = [ "publisher", "designer", "developer", "frontend"];
var all = [ "publisher","퍼블리셔", "디자이너", "designer", "developer","개발자", "frontend", "프론트앤드"];
var number = [ 100, 30, 35, 110, 25, 73, 10 ];
var numberString = [ "100", "30", "35", "110", "25", "73", "10"];
//가나다 순
function ascending ( a , b ) { return ( a < b ) ? -1 : ( a == b ) ? 0 : 1; }
/*
function ascending ( a , b ) {
if ( a < b ) return -1;
else if ( a == b ) return 0;
else return 1;
}
*/
//역순
function descending ( a , b ) { return ( b < a ) ? -1 : ( b == a ) ? 0 : 1; }
korean.sort ( ascending ); (O)
english.sort ( ascending ); (O)
number.sort ( ascending ); (O)
stringNumber.sort ( ascending ); (X)
따라서 문자인 숫자는 1번의 식으로 사용
2) 알파벳 순 ( 대소문자 상관 없음)
다 소문자로 만들어서, 대소문자가 상관없는것임
var korean = [ "퍼블리셔", "디자이너", "개발자", "프론트앤드" ];
var english = [ "publisher", "designer", "developer", "frontend"];
var all = [ "publisher","퍼블리셔", "디자이너", "designer", "developer","개발자", "frontend", "프론트앤드"];
// 대소문자 무시 ( toLowerCase )
function ascending ( a , b ) {
var a = a.toString().toLowerCase();
var b = b.toString().toLowerCase();
return ( a < b ) ? -1 : ( a == b ) ? 0 : 1;
}
//역순
function descending ( a , b ) {
var a = a.toString().toLowerCase();
var b = b.toString().toLowerCase();
return ( b < a ) ? -1 : ( b == a ) ? 0 : 1;
}
korean.sort ( ascending ); (O)
english.sort ( ascending ); (O)
all.sort ( ascending ); (O)
number.sort ( ascending ); (O)
3. 사용자 언어 기준
var korean = [ "퍼블리셔", "디자이너", "개발자", "프론트앤드" ];
var english = [ "publisher", "designer", "developer", "frontend"];
var all = [ "publisher","퍼블리셔", "디자이너", "designer", "developer","개발자", "frontend", "프론트앤드"];
// 로컬에 따라 ( localeCompare ) - 언어에 따라, 결과가 다를 수 있음.
function ascending ( a , b ) {
var a = a.toString();
var b = b.toString();
return a.localeCompare ( b );
}
//역순
function descending ( a , b ) {
var a = a.toString();
var b = b.toString();
return b.localeCompare ( a );
}
korean.sort ( ascending ); (O)
english.sort ( ascending ); (O)
all.sort ( ascending ); (O)
number.sort ( ascending ); (O)
point
all배열을 sort() 했을때,
local에서 한글을 사용하고 있으므로,
1) 사용자 언어기준으로 ( 한글 → 영문)
결과값 : (8) ["개발자", "디자이너", "퍼블리셔", "프론트앤드", "designer", "developer", "frontend", "publisher"]
2) 이 외의 기준으로 ( 영문→ 한글 )
결과값 : (8) ["designer", "developer", "frontend", "publisher", "개발자", "디자이너", "퍼블리셔", "프론트앤드"]
4. 숫자가 포함된 문자열
var overall = [ "tistory 100", "tistory 25", "tistory 5", "tistory 40", "tistory 1" ];
function ascending ( a , b ) {
if ( ! isNaN( a ) && ! isNaN( b ) ) return a - b;
var a = a.toString();
var b = b.toString();
return ( a < b ) ? -1 : ( a == b ) ? 0 : 1; // 또는, return a.localeCompare ( b );
}
//역순
function descending ( a , b ) {
if ( ! isNaN( a ) && ! isNaN( b ) ) return b - a;
var a = a.toString();
var b = b.toString();
return ( b < a ) ? -1 : ( b == a ) ? 0 : 1; // 또는, return b.localeCompare ( a );
}
overall.sort ( ascending ); (O)
5. Object 정렬
위에 함수들을 활용하면 쉽게 할 수 있습니다. 간단한 응용입니다!
var products = [
{
id: 'apple',
name: '사과',
amount: 10,
},
{
id: 'banana',
name: '바나나',
amount: 1,
},
{
id: 'orange',
name: '오렌지',
amount: 3,
},
{
id: 'avocado',
name: '아보카도',
amount: 9,
}
];
name순, (가나다 순)
products.sort(function(a, b) { // 오름차순
return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});
결과 :
- 0: {id: "banana", name: "바나나", amount: 1}
- 1: {id: "apple", name: "사과", amount: 10}
- 2: {id: "avocado", name: "아보카도", amount: 9}
- 3: {id: "orange", name: "오렌지", amount: 3}
amount순 ( 숫자 순)
var sortingField = "amount";
products1.sort(function(a, b) { // 오름차순
return a[sortingField] - b[sortingField];
// return a["amount"] - b["amount"];
});
tip : 객체값을 선택하는 방법 중 하나 a["찾고자하는 key"] (문자로 넣어줘야합니다~!)
결과:
- 0: {id: "banana", name: "바나나", amount: 1}
- 1: {id: "orange", name: "오렌지", amount: 3}
- 2: {id: "avocado", name: "아보카도", amount: 9}
- 3: {id: "apple", name: "사과", amount: 10}
6. map을 사용한 정렬
compareFunction은 배열 내의 요소마다 여러 번 호출될 수 있습니다. 이러한 compareFunction의 성질에 따라, 높은 오버헤드가 발생할 수도 있습니다. compareFunction이 복잡해지고, 정렬할 요소가 많아질 경우, map을 사용한 정렬을 고려해보는 것이 좋습니다. 이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 하는 것입니다.
// 소트 할 배열
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다.
var mapped = list.map(function(el, i) {
return { index: i, value: el.toLowerCase() };
})
// 축소 치를 포함한 매핑 된 배열의 소트
mapped.sort(function(a, b) {
return +(a.value > b.value) || +(a.value === b.value) - 1;
});
// 결과 순서를 위한 컨테이너
var result = mapped.map(function(el){
return list[el.index];
});
참고: tonks.tistory.com/124 / developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
728x90
300x250