Javascript 排序函数错误地改变元素在数组中的位置

Question

我在我的 AngularJS 应用程序中使用数组排序功能。它使用变量direction 来确定是以升序（direction === -1）还是降序（direction === 1）方式对数据进行排序。

出了什么问题：有时当我进行排序时，数组中应该位于相同位置的元素被返回到不同的位置，而数组中没有任何实际变化。

例如，如果我有：

   var arr = [
       {id: 3, name: 'd'},
       {id: 2, name: 'b'},
       {id: 1, name: 'a'},
       {id: 2, name: 'c'}
   ];

我按“id”对它进行排序，方向为-1，它将返回名称为“a,b,c,d”的名称，正如您所期望的那样。然后我会再次排序（将方向更改为1），它会反转方向。但是，如果我再次对其进行排序（使用direction === -1），它将以“a，c，b，d”的顺序返回。

这是一个简化的例子；实际上，它远比这更难以预测。

我感觉我没有正确使用direction。见下文：

this.sortData = function (data, type, direction) {

    return data.sort(sortFunct);

    function sortFunct(a, b) {
        var numberTypes = ['Thread', 'Job', 'FolderCount', 'MessageCount', 'EmailCount', 'CalendarCount', 'TaskCount', 'OtherCount', 'JobId', 'BatchId', 'ItemsTotal', 'ItemsRemaining', 'ItemsFailed', 'Size', 'progress', 'PercentComplete'];
        var stringTypes = ['Level', 'StatusMessage', 'Author', 'ItemStatus', 'JobStatus', 'SourceMailbox', 'TargetMailbox', 'Subject', 'Folder', 'MessageClass', 'StatusMessage', 'Path', 'Owner1',];

        if (numberTypes.indexOf(type) !== -1) {
            return direction * (a[type] - b[type]);
        } else if (stringTypes.indexOf(type) !== -1) {
            if (!a[type]) {
                return 1;
            } else if (!b[type]) {
                return -1;
            } else {
                return a[type].localeCompare(b[type]) * direction;
            }
        } else if (type === 'DiscoveryDate' || type === 'ReceivedDate' || type === 'Timestamp') {
            if (a[type] > b[type]) {
                return direction * 1;
            } else if (a[type] < b[type]) {
                return direction * -1;
            } else {
                return 0;
            }
        } else {
            return direction * (a[type] - b[type]);
        }
    } // End sortFunct
};

Answer 1

.sort() 的 ECMAScript 规范不要求它是稳定的，因此您的自定义排序函数所说的相同元素（例如返回 0）彼此之间的顺序没有保证，并且在事实上，它们最终的顺序可能会受到它们在排序之前的顺序的影响。

如果你想要一个一致的排序，那么你永远不需要从你的自定义排序函数中返回0，除非这两个项目完全相同，以至于你永远无法分辨哪个是哪个。

当主键相同时，您需要测试一个辅助键并返回该比较的结果。如果二级密钥相同，则比较三级密钥等等，只要你值得去。

这种二次比较可以使排序稳定，使其始终以可预测的顺序出现，无论您之前的顺序是什么。

---

我还看到了创建唯一键并将其分配给每个对象并将其用作二级或三级键的排序方案，从而保证如果您关心的键相同，那么您可以比较唯一的键并始终具有一致的稳定排序。

---

这是一个方案示例，如果比较字段（本例中的年龄具有相同的值），则保留原始顺序。要知道原始顺序是什么，它会使用标识原始顺序的origOrder 属性标记每个对象。

var data = [
  {name: "Amy", age: 13},
  {name: "Anne", age: 13},
  {name: "John", age: 11},
  {name: "Jack", age: 12},
  {name: "Ted", age: 11},
  {name: "Alice", age: 12}
];
  
// mark each object with the original order  
data.forEach(function(item, index) {
  item.origOrder = index;
});  
  
data.sort(function(a, b) {
  var diff = a.age - b.age;
  if (diff !== 0) {
    return diff;
  } else {
    return a.origOrder - b.origOrder;
  }
});  

// show results in snippet
document.write(JSON.stringify(data));  

使用 ES6 中的 Map 对象，我们也可以通过创建用于解析关系并将其存储在 Map 对象中的临时索引来实现此操作，而无需触及数组中的原始对象。可以这样工作：

    var data = [
      {name: "Amy", age: 13},
      {name: "Anne", age: 13},
      {name: "John", age: 11},
      {name: "Jack", age: 12},
      {name: "Ted", age: 11},
      {name: "Alice", age: 12}
    ];
    
    // put each object in a temporary map with its original index
    let tempMap = new Map();
    data.forEach((item, index) => {
        tempMap.set(item, index);
    });
      
    data.sort(function(a, b) {
      var diff = a.age - b.age;
      if (diff !== 0) {
        return diff;
      } else {
        return tempMap.get(a) - tempMap.get(b);
      }
    });  

    // show results in snippet
    document.write(JSON.stringify(data));  

通过查看排序结果可以看出，两个相同年龄的条目的相对顺序被保留了，没有以任何方式修改原始对象。

Answer 2

ECMAScript 不要求排序是稳定的 (related question)。此外，即使排序是稳定的，您也不能指望代码知道何时应该反转相同的记录（2 和 2）以及何时不反转。为了能够做到这一点，您永远无法从比较器返回0 - 即，如果出现平局，您需要一个辅助键来帮助消除订单的歧义。如果你想不出更好的，可以给每个对象a unique ID。

Answer 3

“sort() 方法将数组的元素就地排序并返回数组。排序不一定稳定。”

见：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

还有：

https://en.wikipedia.org/wiki/Sorting_algorithm#Stability

'HTH,