Сортировка массивов должна быть простой, не так ли? Если у меня есть массив строк, я хочу отсортировать его по алфавиту [«яблоко», «банан», «огурец»…]. Если у меня есть массив чисел, я хочу, чтобы он был 1,2,3… и так далее. Хотя сортировка строк в массиве проста, после этого становится немного сложнее. Давайте рассмотрим сортировку массива по алфавиту, а затем рассмотрим числовую сортировку и некоторые подводные камни, к которым вы можете обратиться.
Сортировка по алфавиту
Допустим, у нас есть этот массив с названиями некоторых продуктов. Сортировать массив по алфавиту довольно просто. Просто подключите sort (), и ваш массив волшебным образом обновится.
let myArray = ['banana', 'cucumber', 'apple'] myArray.sort(); console.log(myArray); // ['apple', 'banana', 'cucumber']
Что, если мы хотим отсортировать массив по убыванию? Я бы не назвал это самым красивым кодом, но это то, что предлагает нам JavaScript.
myArray.sort().reverse(); console.log(myArray); // ['cucumber', 'banana', 'apple']
Ух ты, теперь ты мастер сортировки! Почему я пишу эту статью? Погодите, это простейший вариант использования сортировки. Давайте углубимся в нечто большее, но не слишком сложное; числа
Числовая сортировка
Итак, в нашем первом примере мы смогли вызвать метод сортировки без параметров, потому что мы сравнивали строки. Для сравнения числа нам нужно будет передать функцию обратного вызова, которая позволит нам управлять некоторой логикой сортировки.
Неправильный путь
Чтобы проиллюстрировать, зачем нам нужна функция обратного вызова, давайте сначала попробуем выполнить сортировку без нее.
Вернемся к коду, давайте создадим еще один массив, но уже заполненный числами. Давайте воспользуемся функцией sort (), которую мы использовали в последнем примере, и посмотрим, что произойдет.
let myNumberArray = [2,3,1]; myNumberArray.sort() // (WRONG WAY) console.log(myNumberArray) // [1,2,3] (WE GOT LUCKY)
Подождите, я думал, мы должны сделать что-то другое ?? Похоже они отсортированы ?? Что ж, в данном случае они есть (нам повезло). Добро пожаловать в причуды JavaScript. Почему они сортируются правильно? Приведу лучший пример и объясню, почему это не всегда работает.
let myNumberArray = [200,23,12]; myNumberArray.sort(); (STILL WRONG WAY) console.log(myNumberArray) // [12, 200, 23] (WRONG)
Увидеть разницу? На этот раз у нас 200 и 23 - неправильные точки. Конечно, 23 меньше 200, но это конец нашего массива! Это произошло потому, что JavaScript обрабатывает числа как строки. Он сравнивает первую цифру обоих чисел, «2», и, поскольку они одинаковы, переходит к следующей цифре. Поскольку «0» меньше «3», он ставит 200 перед 23 и игнорирует третью цифру 200.
Правильный путь
Давайте попробуем это еще раз, но на этот раз мы передадим функцию обратного вызова функции сортировки, чтобы числа отсортировывались правильно. Теперь мы передадим ту функцию обратного вызова, о которой я упоминал ранее. Сначала я сделаю это подробно, а затем покажу вам способ сжать его до одной строки кода.
function sortNumbers(number1, number2){
return number1 - number2;
}
let myNumberArray = [200,23,12];
myNumberArray.sort(sortNumbers);
console.log(myNumberArray) // [12, 23, 200] (CORRECT)
Хорошо, так что, черт возьми, здесь происходит? Позволь мне объяснить. Итак, на этот раз мы создали функцию обратного вызова под названием sortNumbers. Эта функция принимает два параметра: число1 и число2. Если число1 меньше, чем число2, будет возвращено отрицательное значение. Если они равны, вы получите 0. Если число1 больше, вы получите положительное значение.
Когда функция сортировки получает положительное значение, она меняет местами два элемента, перемещая большее значение в конец массива. Таким образом, в этом случае функция сортировки выполнит 200 - 23, что приведет к -177. Поскольку значение отрицательное, число 200 будет перемещено вверх по индексу, а число 23 - вниз. В функции сортировки есть некоторая оптимизация, но вы можете предположить, что метод сортировки будет сравнивать все элементы, необходимые для перемещения их вверх или вниз в массиве, пока он не будет отсортирован. Как круто!
Возвращаясь к коду, вы можете увидеть на StackOverflow или даже в официальных документах следующее. Хотя многие из вас могут знать стрелочные функции ES6, этот код может немного напугать начинающих программистов.
myNumberArray.sort((a, b) => a - b)
Этот код ничем не отличается от того, что мы написали, но он использует функции ES6 Arrow и a и b вместо number1 и number2. Для перевода давайте шаг за шагом конвертируем наш исходный код. Сначала мы преобразуем нашу функцию, чтобы она принимала их параметры.
function sortNumbers(a, b){
return a - b;
}
myNumberArray.sort(sortNumbers);
Видите, то же самое, но здесь мы использовали их упрощенные имена переменных. number1 теперь a, а number2 теперь b. Теперь давайте перейдем к синтаксису стрелок
const sortNumbers = (a,b) => {
return a - b
}
myNumberArray.sort(sortNumbers);
Попасть туда! Теперь мы используем стрелочную функцию и сохраняем ее в const sortNumbers, который затем, как и раньше, передаем в функцию сортировки. Последний шаг - удалить константу и сразу объявить и передать функцию обратного вызова.
myNumberArray.sort((a,b) => a - b)); // This uses the implicit return.
Вуаля! Мы сделали это. Наконец-то мы можем сортировать массив чисел с помощью одной строчки кода, , и мы действительно понимаем, что происходит
Заключение
Есть миллион более сложных случаев сортировки JavaScript, которые я мог бы рассмотреть (например, сортировка по одному полю, затем по другому полю, то есть сначала по фамилии, затем по имени) или сортировка по свойству вложенного объекта, но эта статья уже довольно долго. Я рекомендую вам осмотреться и использовать эти примеры кода в качестве шаблона для создания более сложных функций сортировки.
Надеюсь, вам понравилась эта статья. Пожалуйста, подпишитесь на меня и оставьте несколько аплодисментов, если вы хотите видеть больше подобных сообщений. Не стесняйтесь обращаться с любыми вопросами, удачной недели кодирования!
Больше контента на plainenglish.io
