对数组项进行排序并保留相同元素的顺序

Question

假设我有这个数组:

var array = [
  { name: "border-color", value: "#CCCCCC" },
  { name: "color", value: "#FFFFFF" },
  { name: "background-color", value: "rgb(0, 0, 0)" },
  { name: "background-color", value: "rgba(0, 0, 0, .5)" }
];

此函数按名称对数组进行排序:

array.sort(function(a, b) {
  if (a.name < b.name) return -1;
  if (a.name > b.name) return 1;
  return 0;
});

和ECMAScript语言规范告诉我:

排序不一定稳定(即,比较相等的元素不一定保持原始顺序).

因此,排序后,名称=背景颜色的两个项目可以按任何顺序出现,即:

[
  { name: "background-color", value: "rgb(0, 0, 0)" },
  { name: "background-color", value: "rgba(0, 0, 0, .5)" },
  ...
]

要么

[
  { name: "background-color", value: "rgba(0, 0, 0, .5)" },
  { name: "background-color", value: "rgb(0, 0, 0)" },
  ...
]

如何对数组进行排序,以使具有相同名称的项保持其相对顺序？我宁愿不硬编码.

Answer 1

理论上,在排序之前,您可以跟踪数组中的索引,并在排序时将其考虑在内.

var sortArray = yourarray.map(function(data, idx){
    return {idx:idx, data:data}
})

sortArray.sort(function(a, b) {
  if (a.data.name < b.data.name) return -1;
  if (a.data.name > b.data.name) return 1;
  return a.idx - b.idx
});

var answer = sortArray.map(function(val){
    return val.data
});

Answer 2

这最近发生了变化。从 ES2019 开始，Array#sort是stable，这意味着具有相同的两个条目name将具有与数组排序之前相同的相对位置：

22.1.3.27 Array.prototype.sort ( comparefn )

此数组的元素已排序。排序必须是稳定的（也就是说，比较相等的元素必须保持其原始顺序）。

（我的重点）

所以你的情况，顺序{ name: "background-color", value: "rgb(0, 0, 0)" }和{ name: "background-color", value: "rgba(0, 0, 0, .5)" }将保持不变，因为他们比较结果为相等。

在 ES2019 之前，排序不需要是稳定的，所以他们可以颠倒顺序——或者不颠倒，这取决于实现。