js数组sort()处理特殊值null

今天遇到一个问题，对象数组使用sort排序显示不准确，经排查因为比较值为null导致。

let arr = [{key: 3}, {key: null}, {key: null}, {key: 7}, {key: -3}, {key: -23}];
//升序
arr.sort(function(a, b) {
  return a.key - b.key
});
//排序结果
// [{key: -23}, {key: -3}, {key: null}, {key: null}, {key: 3}, {key: 7}]

比较过程中, null参与运算时会先转换成0, 所以排在正数和负数中间

按照产品要求, null在页面显示为 - , 并且排在列表最后, 这就有问题了. 

看下sort比较的过程

从第二个数开始往前比, 比它大就往后排, 以此类推进行到最后一个数, 这是插入排序啊.

看下mdn文档中对 Array.prototype.sort() 的描述: 

参数 **(a, b)** 中, a主动与它前面的值比较, b是被动与它后面的值比较. 返回值大于0, a会往后扔, 小于0则往前扔 .

这样我就改下代码,果然可以了:

let arr = [{key: 3}, {key: null}, {key: null}, {key: 7}, {key: -3}, {key: -23}];
arr.sort(function(a, b) {
  if (a.key === null) {
    return 1;
  }
  if (b.key === null) {
    return -1;
  }
  return a.key - b.key;
})
// [{key: -23}, {key: -3}, {key: 3}, {key: 7}, {key: null}, {key: null}]

 改成降序, 结果显示:

arr.sort(function(a, b) {
  if (a.key === null) {
    return 1;
  }
  if (b.key === null) {
    return -1;
  }
  return b.key - a.key;
})
// [{key: 7}, {key: 3},{key: -3}, {key: -23}, {key: null}, {key: null}]

 交工!