[자바스크립트 응용하기] 검색 이펙트06_ 정렬

검색 효과

검색 효과 여섯번째 시간입니다. 다양한 방법으로 정렬해 봅시다 .

---

원본 소스 보기 원본 사이트

---

JS 소스

// 내용소스는 아이프레임 참조해주세요.
// 데이터 출력하기
const updateList = () => {
    let listCSS = "";

    cssProperty.forEach((data, index)=>{
        listCSS += `<li>${data.num}. ${data.name} : ${data.desc} </li>`;
    });

    cssList.innerHTML = listCSS;
}
updateList();

// 반대로 정렬
function sortReverse(){
    cssProperty.reverse();
    updateList();
}
// 오름차순 정렬
function sortAscending(){
    cssProperty.sort((a,b)=>{
        return a.num - b.num;
    });
    updateList();
}
// 내림차순 정렬
function sortDescending(){
    cssProperty.sort((a,b)=>{
        return b.num - a.num;
    });
    updateList();
}
// 알파벳순[a-z] 정렬
function sortAlphabet(){
    cssProperty.sort((a,b)=>{
        return a.name.localeCompare(b.name);
    });
    updateList();
}
// 알파벳순[z-a] 정렬
function sortAlphabetZ(){
    cssProperty.sort((a,b)=>{
        return b.name.localeCompare(a.name);
    });
    updateList();
}

let cssProp = [];
const updateList2 = ()=>{
    //for of문
    // for(let list of cssProperty){
    //     cssProp.push(`<li>${list.num}. [${list.category}] <strong>${list.name}</strong> : ${list.desc}</li>`);
    // }
    
    //map()문
    cssProperty.map((data)=>{
        cssProp.push(`<li>${data.num}. ${data.name} : ${data.desc} </li>`);
    });

    cssList.innerHTML = cssProp.join('');
}
updateList2();
//피셔 에이츠 알고리즘(랜덤정렬)
function shuffle(data){
    for( let i=data.length-1; i>=0; i-- ){
        const randomIndex = Math.floor(Math.random()*(i+1));
        // console.log(randomIndex);
        [data[i], data[randomIndex]] = [data[randomIndex], data[i]];
        cssList.innerHTML += data[i];
    }
};


// 반대로 정렬 클릭
document.querySelector(".btn1").addEventListener("click",()=>{
    sortReverse();
});
// 오름차순 정렬 클릭
document.querySelector(".btn2").addEventListener("click",()=>{
    sortAscending();
});
// 내림차순 정렬 클릭
document.querySelector(".btn3").addEventListener("click",()=>{
    sortDescending();
});
// 알파벳순[a-z] 정렬 클릭
document.querySelector(".btn4").addEventListener("click",()=>{
    sortAlphabet();
});
// 알파벳순[z-a] 정렬 클릭
document.querySelector(".btn5").addEventListener("click",()=>{
    sortAlphabetZ();
});
// 랜덤정렬 클릭
document.querySelector(".btn6").addEventListener("click", (e)=>{
    e.preventDefault();
    cssList.innerHTML= "";
    shuffle(cssProp);
});

■ 핵심 찍먹하기🪓

✔ sort()

sort()메서드는 배열의 요소를 오름차순, 내림차순 으로 정렬할 때 유용한 메서드입니다. 기본은 오름차순이고 정확하게는 문자열의 유니코드 코드 포인트를 따릅니다. 알파벳의 경우는 유니코드상 대문자 이후 소문자가 오기에 소문자가 더 큽니다.

---

🙇‍♀️ 틀린 점에 대한 지적은 언제나 환영합니다 🙇‍♂️