Javascript 按属性对数组排序

我现在只需要得到数组的前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>

{ 
champions.切片（0,3）.映射（函数（champ）{
返回(

{champ.name}
某物

)
}) 
}

每个

champ

都有一个

level

属性（champ.level）

---

如何将我的输出排序到冠军级别

降序

并将前3个进行切片？

编写您自己的比较函数：

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

与自定义比较函数一起使用，首先执行降序排序：

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

使用ES6时，效果更好：

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

---

纯JS解决方案很好。但如果您的项目是通过npm建立的，您也可以使用或。在许多情况下，这些已经是子依赖项，因此不会产生额外的权重

结合ES6和lodash提供的orderBy

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

---

这是一个强大的小实用程序。您可以为orderBy提供多个打破僵局的排序键，并分别为每个键指定一个顺序。

谢谢，ES6解决方案看起来非常美味！注意：这将对数组进行适当排序（并返回数组）。这意味着在

champions.sort（…）

之后，

champions

将被修改（排序）。这是一个错误的建议，在JavaScript不那么好的时候继续使用构建的库。@PatrickMichalina，现在是2020年，如果我没有弄错的话，JavaScript排序仍然很可怕。它改变了数组，并且不是声明性的（即使用升序/降序等清晰名称以提高可读性）。一半的时间我需要排序的东西，它仍然需要7或8行代码来做一些应该是1行容易。

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