SearchEffect06- sort( ),reverse( )

 

const sreachBox = document.querySelectorAll(".search span");    //버튼
const cssList = document.querySelector(".list ul");             //속성 리스트
const cssCount = document.querySelector(".count");              //CSS 속성 갯수                  

//데이터 출력
const updateList = function(){                      //데이터 출력 함수를 변수로 지정해서 재활용 하겠음.
    let listHTML = '';                              //리스트 출력 초기값 설정.
    cssProperty.forEach((data,index)=>{             //forEach를 이용해서 데이터와 인덱스를 불러옴
        listHTML += `<li>${data.num}. ${data.name} : ${data.desc}</li>`;    //``백틱 문자열을 이용해서 표기.
            cssCount.innerHTML = `전체 목록 갯수 : <em>${index}</em>개`;       //전체 갯수가 몇개인지 표기.
    })            
    cssList.innerHTML = listHTML;                   //HTML 안에 출력.
}       
updateList();
//반대 정렬
function reverse(){
    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;		// a,b 순서를 바꿔서 반대 방향으로 실행(내림차순)
    })
    updateList();
}
//알파벳 정렬(a to z)
function sortAlphabet(){
    cssProperty.sort((a,b) => {
        let x = a.name;
        let y = b.name;
        return x.localeCompare(y);		//sort 메서드의 localeCompare를 이용해서 문자 순서대로 정렬.
    })
    updateList();
}
//알파벳 정렬(z to a)
function sortAlphabetZ(){
    cssProperty.sort((a,b) => {
        let x = a.name;
        let y = b.name;
        return y.localeCompare(x);		// localeCompare의 인자 값 순서를 바꾸면 역 방향으로 정렬.
    })
    updateList();
}
//반대로 정렬 버튼 클릭시
document.querySelector(".btn1").addEventListener("click", ()=>{
    reverse();													// 위에서 만든 함수 실행.
})
    //오름차순 버튼 클릭시
    document.querySelector(".btn2").addEventListener("click", ()=>{
    sortAscending();											// 위에서 만든 함수 실행.
})
//내림차순 버튼 클릭시
document.querySelector(".btn3").addEventListener("click", ()=>{
    sortDescending();											// 위에서 만든 함수 실행.
})
//알파벳(A to Z) 버튼 클릭시
document.querySelector(".btn4").addEventListener("click", ()=>{
    sortAlphabet();												// 위에서 만든 함수 실행.
})
//알파벳(Z to A) 버튼 클릭시
document.querySelector(".btn5").addEventListener("click", ()=>{
    sortAlphabetZ();											// 위에서 만든 함수 실행.
})

sort( ), reverse( )참고

자바스크립트

 

이번에는 reverse() 와 sort() 메서드를 이용한 예제입니다. 리버스는 배열의 순서를 역 방향으로 정렬해주는 기능입니다. 

sort()는 조건에 맞게 배열을 정렬 해주는 기능입니다. 

문자열을 정렬할 때에는 localeCompare 기능을 활용합니다. 

이번에는 간단하게 만들었지만  다양한 배열 메서드를 같이 활용해서 일정 부분까지는 순 방향으로 정렬하고 특정 부분 부터는 역방향으로 정렬하는 기능도 만들 수 있겠죠?