[Javascript] sort() : 내림차순 / 오름차순

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