Как надежно отсортировать массивы с помощью методов DOM?

ПРЕДВАРИТЕЛЬНОЕ ПРИМЕЧАНИЕ: Я не использую здесь jQuery или другую библиотеку, потому что хочу понять, что я написал и почему это работает (или не работает), поэтому, пожалуйста, не отвечайте это с библиотеками или плагинами для библиотек. Я ничего не имею против библиотек, но для этого проекта они враждебны моим целям программирования.

Тем не менее…

На http://meyerweb.com/eric/css/colors/я добавил некоторую сортировку столбцов, используя DOM-функции, которые написал сам. Проблема в том, что, хотя это прекрасно работает, скажем, для простого случая упорядочения строк по алфавиту, результаты несовместимы в разных браузерах, когда я пытаюсь сортировать по нескольким числовым терминам — по сути, когда я пытаюсь выполнить сортировку с двумя подсортами.

Например, если вы несколько раз нажмете «Десятичный RGB» в Safari или Firefox на OS X, вы получите ожидаемые результаты. Сделайте то же самое в Chrome или Opera (опять же, OS X), и вы получите совсем другие результаты. Да, Safari и Chrome здесь расходятся.

Вот фрагмент JS, который я использую для сортировки RGB:

sorter.sort(function(a,b){
    return a.blue - b.blue;
});
sorter.sort(function(a,b){
    return a.green - b.green;
});
sorter.sort(function(a,b){
    return a.red - b.red;
});

(sorter— это массив, который я пытаюсь отсортировать.)

Сортировка выполняется по традиции другого вопроса StackOverflow «Как сортировать многомерный массив по нескольким столбцам в JavaScript?» и его лучший ответ.Тем не менее, результаты оказались не такими, как я ожидал, в двух из четырех браузеров, которые я первоначально опробовал.

Я вроде бы (ха!) понимаю, что это связано с «нестабильностью» сортировки массивов — здесь нет аргументов! — но чего я не знаю, так это того, как преодолеть это последовательным и надежным способом. Мне действительно не помешала бы помощь как в понимании проблемы, так и в видении решения, или, по крайней мере, общего описания решения.

Я понимаю, что существует около шести миллионов способов оптимизации остальной части JS (да, я использовал глобальный). Я все еще новичок в JS и пытаюсь исправить это на практике. Прямо сейчас меня смущает сортировка массивов, и мне не помешала бы помощь с этим фрагментом скрипта, прежде чем переходить к очистке кода в другом месте. Заранее спасибо!

ОБНОВЛЕНИЕ

В дополнение к приведенным ниже замечательным объяснениям и предложениям я получил строку о еще более компактном решении:

function rgbSort(a,b) {
    return (a.red - b.red || a.green - b.green || a.blue - b.blue);
}

Хотя я еще не совсем понимаю его, я думаю, что начинаю понимать его очертания, и это то, что я использую сейчас. Спасибо всем за вашу помощь!

8
задан Community 23 May 2017 в 12:07
поделиться