Search Effect 06 - sort() / reverse ()

   const cssProperty = [
       {num: 5, name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."},
       {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
       {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
       {num: 9, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
       {num: 1, name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
       {num: 6, name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
       {num: 7, name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터 효과를 설정합니다."},
       {num: 8, name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
       {num: 4, name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
       {num: 10, name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
       {num: 11, name: "display", desc: "display는 요소를 어떻게 보여줄지 결정합니다"},
       {num: 12, name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."}
   ];

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


    // 데이터 출력
    const updateList = function (){			// updataList라는 함수를 만들어서 계속 재활용 할 것이다.
        let listHTML = '';						// listHTML 이란 변수에 저장

        cssProperty.forEach((el, index) => {	// 속성리스트 각각의
            listHTML += `<li>${el.num}. ${el.name} : ${el.desc}</li>`		// 속성리스트 요소(el)들의 num, name, desc값
            cssCount.innerText = `전체 목록 갯수 : ${index+1}개`			// 갯수(index)값 뽑아내서 cssCount에 넣어줌
        })
        cssList.innerHTML = listHTML;		// 저장된 요소값들을 cssList에 넣어줌.
    }
    updateList();			

    // 반대정렬 : reverse() 는 배열을 역순으로 정렬해서 나타냄.
    function reverse(){
        cssProperty.reverse()
        updateList();
    }

    // 오름차순 정렬 : sort()는 배열을 정렬할 수 있음.
    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) : sort(){.localeCompare}을 이용
    function sortAlphabet(){
        cssProperty.sort((a,b) => {
            let x = a.name;
            let y = b.name;
            return x.localeCompare(y)
        })
        updateList();
    }
    // 알파벳 정렬(z~a)
    function sortAlphabetZ(){
        cssProperty.sort((a,b) => {
            let x = a.name;
            let y = b.name;
             return y.localeCompare(x)
        })
        updateList();
    }

    // forEach문
    // cssProperty.forEach(el => {
    //    listHTML += `<li>${el.name}</li>`
    // })

    // for of 문
    // for(let data of cssProperty){
    //    listHTML += `<li>${data.name}</li>`
    // }
        
    // 반대로 버튼 클릭시
    document.querySelector(".btn1").addEventListener("click", () => {
        reverse();
    })
    // 내림차순 버튼 클릭시
    document.querySelector(".btn3").addEventListener("click", () => {
        sortDescending();
    })
    // 오름차순 버튼 클릭시
    document.querySelector(".btn2").addEventListener("click", () => {
        sortAscending();
    })
    // 알파벳 정렬(a~z) 버튼 클릭시
    document.querySelector(".btn4").addEventListener("click", () => {
        sortAlphabet();
    })
    // 알파벳 정렬(z~a) 버튼 클릭시
    document.querySelector(".btn5").addEventListener("click", () => {
        sortAlphabetZ();
    })


 
  // }

sort( ) / reverse ( ) 참고

https://jiseonpack.github.io/webs_class/javascript/effect/searchEffect06.html

Search Effect