programing

속성별 배열 정렬

powerit 2023. 3. 14. 21:55
반응형

속성별 배열 정렬

어레이의 첫 번째 3개의 오브젝트를 가져와 매핑합니다.

<ul className="ItemSearchList"> 
  { 
    champions.slice(0,3).map(function(champ){
      return (
        <li key={champ.id} >
          <div className="media">
            <div className="media-left">
              <a href="#">
                <img className="media-object" src={"http://ddragon.leagueoflegends.com/cdn/5.2.1/img/champion/" + champ.key  + ".png"} />
              </a>
            </div>
            <div className="media-body" >
              <h4 className="media-heading">{champ.name}</h4>
              <div>
                something
              </div>
            </div>
          </div>
        </li>
      )
    }) 
  }
</ul>

각각champ가 있다levelattribute(챔프 레벨).

출력 정렬 방법champ.level descending처음 3개를 썰어줄까요?

사용자 정의 비교 함수와 함께 사용하여 먼저 내림차순 정렬을 수행합니다.

champions.sort(function(a, b) { return b.level - a.level }).slice(...

ES6를 통한 더욱 뛰어난 기능:

champions.sort((a, b) => b.level - a.level).slice(...

사용자 고유의 비교 함수를 작성합니다.

function compare(a,b) {
  if (a.level < b.level)
     return -1;
  if (a.level > b.level)
    return 1;
  return 0;
}

사용방법:

champions.sort(compare).slice(0,3).map(function(champ) {

순수 JS 솔루션은 훌륭합니다.그러나 프로젝트가 npm을 통해 설정된 경우 Lodash 또는 Underscore를 사용할 수도 있습니다.대부분의 경우, 이러한 것들은 이미 하위 종속성이기 때문에 추가 가중치가 발생하지 않습니다.

ES6 와의 조합_.orderBylodash에 의해 제공되다

_.orderBy(champions, [c => c.level], ['desc']).slice(0,3)

이것은 강력한 작은 유틸리티입니다.여러 개의 타이 브레이크 정렬 키를 제공할 수 있습니다.orderBy및 각 순서를 개별적으로 지정합니다.

"level" 속성이 숫자인 경우 위의 답변이 작동하지만 "level" 속성이 문자열인 경우 일반 솔루이톤의 경우 먼저 정렬 기준을 결정하는 함수를 작성합니다.

function getSortingCriteria(champ){
   // this will return sorting criteria
   return cham.level
}

정렬 기준에 따라

champs
  .sort((a, b) => {
    // valueA and valueB are two simple values
    const valueA = getSortingCriteria(a);
    const valueB = getSortingCriteria(b);

    if (typeof valueA === "string") {
      // this is descending order
      return valueB.localCompare(valueB);
    } else {
      // desc order
      return valueB - valueA;
    }
  })
  .slice(0, 3);

언급URL : https://stackoverflow.com/questions/28853686/sort-array-by-attribute

반응형