STUDY/Javascript

Javascript 정렬하기

티앤모이 2023. 9. 27. 16:16

필터에 API를 통해서 데이터 리스트를 가져오면서 정렬을 하게되었다.

데이터는 가나다 순이 아니라 해당하는 데이터가 많은 순으로 가져오고 있었지만 가나다 순 정렬을 해달라는 요청이 들어왔다!

 

처음에는 서버단에서 API 호출 후 리턴된 데이터를 정렬하려고 하였는데 데이터가 많아서 그런지 로컬 톰캣이 정렬 몇번하고 나면 뻗어버렸다,,,

 

그래서 정렬을 클라이언트에서 하기로 했다.

Javascript를 사용하고 있어서 Javascript로 정렬하는 코드를 짜봤다!

const jsonArray = [{"value":"비맥스","count":172},{"value":"비비빅","count":172}];

const patternNumber = /[0-9]/;  // 숫자 정규표현식
const patternAlphabet = /[a-zA-Z]/; // 알파벳 정규표현식
const patternHangul = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;    // 한글 정규표현식
const patternSpecial = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/;   // 특수문자 정규표현식
const orderLevelDesc = [patternSpecial, patternNumber, patternAlphabet, patternHangul]; // 정렬 순서 레벨링 1.특수문자 2.숫자 3.알파벳 4.한글

// 해당 문자의 레벨을 확인
const getLevel = (s) => {
  const index = orderLevelDesc.findIndex((pattern) => pattern.test(s));
  return index;
};

// JSON 리스트를 정렬
const sortGroupJson = function(source){
  source.sort((a, b) => {
    const aValue = a.value;
    const bValue = b.value;

    console.log("aValue : "+aValue);
    console.log("bValue : "+bValue);

    // 두 문자열 중 길이가 짧은 문자열의 길이만큼 반복문을 돌린다.
    let loopCount = aValue.length > bValue.length ? bValue.length : aValue.length;

    for(let i=0; i<loopCount; i++){
        
        // 두 문자열의 해당 인덱스에 해당하는 문자가 같은 레벨인지 확인한다(같은 한글/영어 등등인지)
        const aLevel = getLevel(aValue.charAt(0));
        const bLevel = getLevel(bValue.charAt(0));
    
        if (aLevel === bLevel) {
            // 같은 레벨이라면 해당 문자의 유니코드를 비교한다
            if(aValue.charCodeAt(i) != bValue.charCodeAt(i)){
                // 해당 문자가 같지 않다면 정렬
                return aValue.charCodeAt(i) - bValue.charCodeAt(i);
            }else{
                // 해당 문자가 같은데
                if(i == loopCount -1){
                    // 반복문은 끝났을 경우 길이에 따라 정렬
                    if(a.length == loopCount){
                        // a가 문자열이 더 길 경우 양수값 리턴 (b를 뒤로 보냄)
                        return 1;
                    }else{
                        // b가 문자열이 더 길 경우 음수값 리턴 (b를 앞으로 보냄)
                        return -1;
                    }
                }
            }
        }else{
            // 같은 레벨이 아니라면 레벨에 따라서 정렬 (특수문자 -> 숫자 -> 영어 -> 한글 순)
            return bLevel - aLevel; // Ascending order
        }
    }
  });
};