Предположим, что у меня есть этот массив:
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)" },
...
]
Как я могу отсортировать массив так, чтобы элементы с одинаковым именем сохраняли свой относительный порядок? Я бы предпочел ничего не делать.
Теоретически перед сортировкой вы можете отслеживать свой индекс в массиве и учитывать это при сортировке.
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
});
Поскольку массив содержит ссылочный тип objet, индекс элемента может быть определен в функции сортировки. Поэтому мы избегаем карты до и после сортировки.
sortArray.sort((function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return this.indexOf(a) - this.indexOf(b);
}).bind(sortArray));
Добавьте дополнительный атрибут в массив: order
var array = [
{ name: "border-color", value: "#CCCCCC", order: 1 },
{ name: "color", value: "#FFFFFF", order: 2 },
{ name: "background-color", value: "rgb(0, 0, 0)", order: 3 },
{ name: "background-color", value: "rgba(0, 0, 0, .5)", order: 4 }
];
а затем измените функцию сортировки для сортировки по порядку, если имя равно:
array.sort(function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
if (a.name == b.name) {
if(a.order > b.order) return -1; else return 1;
}
});
Обратите внимание, что знак возврата для заказа должен быть изменен в зависимости от того, хотите ли вы его сортировать, увеличивая или уменьшая (здесь я предположил, что вы сортируете от самого большого к самому маленькому, поэтому возвращайте один с меньшим порядком).
Это изменилось недавно. Начиная с ES2019, Array#sort стабильна, это означает, что две записи с одинаковыми name будут иметь одинаковую позицию относительно друг друга, как они делали до сортировки массива:
22.1.3.27 Array.prototype.sort (сравните)
Элементы этого массива отсортированы. Сортировка должна быть стабильной (то есть элементы, которые сравниваются равными, должны оставаться в своем первоначальном порядке).
(мой акцент)
Так что в вашем случае, порядок { name: "background-color", value: "rgb(0, 0, 0)" } и { name: "background-color", value: "rgba(0, 0, 0,.5)" } останется прежним, потому что они сравниваются как равные.
До ES2019 сортировка не требовала стабильности, поэтому их порядок мог быть изменен или нет, в зависимости от реализации.