按属性对数组排序

IT技术 javascript reactjs
2021-05-16 02:08:56

我现在只获取数组的前 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属性（champ.level）。

如何将我的输出排序champ.level descending并切片前 3 个？

3个回答

使用Array.prototype.sort()自定义比较函数首先进行降序排序：

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或下划线。在许多情况下，这些已经是子依赖项，因此不会产生额外的重量。

结合 ES6 和_.orderBylodash 提供

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

这是一个强大的小工具。您可以为 提供多个打破平局的排序键orderBy，并为每个键单独指定一个顺序。

其它你可能感兴趣的问题
上一篇React Hook "useEffect" 被有条件地调用 下一篇将连接在一起的接头的比较设计方法