使用Axios调用CoinMarketCap API时sort()排序失效问题排查

你代码里的排序逻辑有个关键错误：JavaScript的Array.sort()方法要求比较函数返回数字（正数、负数或0），但你现在返回的是布尔值（a.rank > b.rank会得到true或false，在排序时会被转换成1或0），这会导致排序逻辑完全不符合预期。

正确的排序写法 #

把formatCoins里的排序代码改成这样：

coinDataArray.sort(function(a,b) {
  return a.rank - b.rank; // 升序排列，小的rank在前
  // 如果要降序排列，就写成 return b.rank - a.rank;
})

为什么原来的写法不行？ #

当你返回a.rank > b.rank时：

• 如果a的rank比b大，返回true（即1），sort会认为a应该排在b后面（这部分是对的）
• 如果a的rank比b小，返回false（即0），sort会认为a和b的位置不需要交换（这就错了！）
• 这样只有当a的rank明显大于b时才会调整位置，其他情况都不会动，自然就没法正确排序。

补充验证 #

你可以在控制台打印两种比较函数的返回值，就能清楚看到差异：

• 旧写法：console.log(2 > 5) → false（0）；console.log(5 > 2) → true（1）；console.log(3 > 3) → false（0）
• 新写法：console.log(2 - 5) → -3；console.log(5 - 2) → 3；console.log(3 - 3) → 0

这样sort才能根据返回值正确判断元素的相对位置。

修改后的完整formatCoins函数 #

function formatCoins(res) {
  var coinDataArray = []
  Object.keys(res.data).forEach(function(key) {
    coinDataArray.push(res.data[key])
  })
  // 修正排序逻辑
  coinDataArray.sort(function(a,b) {
    return a.rank - b.rank
  })
  console.log(coinDataArray)
  return coinDataArray; // 这里必须返回处理后的数组，否则Vue拿不到数据！
}

另外还有个容易忽略的细节：你原来的formatCoins函数没有返回值！所以this.results = formatCoins(resp)其实是把undefined赋值给了results，这也是导致页面数据异常的潜在问题，一定要加上return coinDataArray;这一行。

内容的提问来源于stack exchange，提问作者szewah