按属性对数组进行排序

Question

我现在只获取数组的前三个对象并对它们进行映射：

<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的值进行降序排序并保留前3个元素？

- Mini John

Answer 1

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

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

使用ES6更加方便：

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

- Jonny Buchanan

---

谢谢，那个 ES6 的解决方案看起来非常棒！ - Mini John

注意：这个函数会就地对数组进行排序（并且也会返回这个数组）。这意味着在执行champions.sort(…)之后，champions数组会被修改（排好序）。 - Lynn

Answer 2

编写您自己的比较函数：

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) {

- Jordi Castilla

Answer 3

纯JS的解决方案很好。但如果你的项目是通过npm设置的，你也可以使用Lodash或Underscore。在许多情况下，它们已经是子依赖项，因此不会增加额外的负担。

结合ES6和由Lodash提供的_.orderBy

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

这是一个非常实用的小工具。你可以为orderBy提供多个排序关键字，并为每个关键字指定排序顺序。

- pscl

---

继续使用为早期 JavaScript 开发而构建的库是个糟糕的建议，因为这些库已经过时。 - Patrick Michalina

@PatrickMichalina，现在是2020年，如果我没记错的话，JavaScript的排序仍然很糟糕。它会改变数组并且不够声明式（例如使用清晰的名称如升序/降序以提高可读性）。大部分时间，我需要对某些东西进行排序，但仍需要编写7或8行代码才能完成本应只需1行代码的操作。 - l p

Answer 4

如果“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);

- Yilmaz