반응형
속성별 배열 정렬
어레이의 첫 번째 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
가 있다level
attribute(챔프 레벨).
출력 정렬 방법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 와의 조합_.orderBy
lodash에 의해 제공되다
_.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
반응형
'programing' 카테고리의 다른 글
폐지 통지:React DOM.render는 React 18에서 지원되지 않습니다. (0) | 2023.03.14 |
---|---|
$postLink 각진 컴포넌트/방향성이 너무 빨리 실행됨 (0) | 2023.03.14 |
트리거 $document.ready(수정할 수 없는 AJAX 코드가 실행됨) (0) | 2023.03.09 |
Angular.js는 이전 방식으로 제출합니다. (0) | 2023.03.09 |
react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법 (0) | 2023.03.09 |