[축구모임 홈페이지개발] 01/04 개발일지 Nodejs / 딕셔너리(객체)를 배열로 변환, 내림차순 sort()

어제 MVP Board 탭 기능구현을 했었다.

남은 단계는 이제 점수가 높은 순으로 배치를 하는건데.

문제는 어제 얘기했듯 javascript 에서 딕셔너리는 순서를 변경하는 기능을 지원하지 않는 것.

그래서 Map() 을 이용해보려했는데 다른 방법을 찾았다.

딕셔너리를 통째로 키-값 을 배열로 변환하고 배열을 출력하는 것.

 

const mvpArray=Object.entries(mvpboard);

 

mvpboard 딕셔너리(객체) 를 mvpArray 배열로 변환해줬다.

 

const mvpboard = {
  player1: 100,
  player2: 80,
  player3: 120
};

 

위 코드를 배열로 변환시키면

 

[
  ['player1', 100],
  ['player2', 80],
  ['player3', 120]
]

 

이 꼴로 배열로 변환된다.

 

mvpArray.sort((a, b) => b[1] - a[1]);: sort() 메서드를 사용하여 배열을 정렬합니다. sort() 메서드는 정렬된 배열을 반환하며, 정렬 순서를 결정하는 함수를 전달할 수 있습니다.

• a와 b는 각각 배열의 두 요소를 나타냅니다. 여기서는 각 요소가 [키, 값] 형태의 배열이기 때문에, a[1]은 a의 값에 해당하고, b[1]은 b의 값에 해당합니다.
• b[1] - a[1]는 값에 대한 내림차순 정렬을 의미합니다. 즉, b[1]이 a[1]보다 크면 양수가 반환되어 b가 a보다 앞에 위치하게 됩니다. 반대로, b[1]이 a[1]보다 작으면 음수가 반환되어 b가 a보다 뒤에 위치하게 됩니다.
• 이로써 sort() 메서드는 배열을 값에 따라 내림차순으로 정렬합니다.

          for (i=0; i<12; i++) {

          %>

              <div class="MvpBoard-area">

                <div class="MvpBoard-area-rank">

                  <%=i+1%>

                </div>

                <div class="MvpBoard-area-name">

                  <%=mvpArray[i][0]%>

                </div>

                <div class="MvpBoard-area-rank">

                  <%=mvpArray[i][1]%>

                </div>

              </div>

              <%}%>

 

---