Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке.

JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает:

var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();

alert(fruits); // Выводит: Apple,Banana,Mango,Orange,Papaya
alert(sorted); // Выводит: Apple,Banana,Mango,Orange,Papaya

Реверсирование массива

Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива на обратный.

Этот метод обращает массив таким образом, что первый элемент массива становится последним, а последний элемент массива становится первым. Вот пример:

var counts = ["one", "two", "three", "four", "five"];
var reversed = counts.reverse(); 

alert(counts); // Выводит: five,four,three,two,one
alert(reversed); // Выводит: five,four,three,two,one

Сортировка числовых массивов

Метод sort() может дать неожиданный результат, если он применяется к числовым массивам (то есть массивам, содержащим числовые значения). Например:

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Сортировка чисел
alert(numbers); // Выводит: 10,100,20,5,50,75

Как видите, результат отличается от того, что мы ожидали. Это происходит потому, что метод sort() сортирует элементы числового массива путем преобразования их в строки (т. е. 20 становится «20», 100 становится «100» и т. д.), И поскольку первый символ строки «20» (т. е. «2») следует после первого символа строки «100» (т.е. «1»), поэтому значение 20 следует после 100 в этой интерпретации.

Чтобы исправить эту проблему сортировки с числовым массивом, вы можете передать функцию сравнения, например так:

var numbers = [5, 20, 10, 75, 50, 100];

// Сортировка массива с помощью функции сравнения
numbers.sort(function(a, b) {
    return a - b;
});
alert(numbers); // Выводит: 5,10,20,50,75,100

Как видите, на этот раз мы получили правильный результат. Посмотрим, как это работает.

Когда указана функция сравнения, элементы массива сортируются в соответствии с возвращаемым значением функции сравнения. Например, при сравнении a и b:

• Если функция сравнения возвращает значение меньше 0, то первым идет a.
• Если функция сравнения возвращает значение больше 0, тогда b идет первым.
• Если функция сравнения возвращает 0, a и b остаются неизменными по отношению друг к другу, но сортируются по всем остальным элементам.

Следовательно, поскольку 5 - 20 = -15 меньше 0, следовательно, 5 стоит на первом месте, аналогично 20 - 10 = 10 больше 0, следовательно, 10 предшествует 20, также 20 - 75 = -55, что меньше 0 , то есть 20 предшествует 75, аналогично 50 предшествует 75 и так далее.

Нахождение максимального и минимального значения в массиве

Вы можете использовать метод apply() в сочетании с Math.max() и Math.min(), чтобы найти максимальное и минимальное значение внутри массива, например:

var numbers = [3, -7, 10, 8, 15, 2];

// Определение функции для поиска максимального значения
function findMax(array) {
    return Math.max.apply(null, array);
}

// Определение функции для поиска минимального значения
function findMin(array) {
    return Math.min.apply(null, array);
}

alert(findMax(numbers)); // Выводит: 15
alert(findMin(numbers)); // Выводит: -7

Метод apply() предоставляет удобный способ передачи значений массива в качестве аргументов функции, которая принимает несколько аргументов в виде массива (например, методы Math.max() и Math.min()). Таким образом, результирующий оператор Math.max.apply(null, numbers) в приведенном выше примере эквивалентен Math.max(3, -7, 10, 8, 15, 2).

Сортировка массива объектов

Метод sort() также можно использовать для сортировки массивов объектов с помощью функции сравнения.

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

var persons = [
    { name: "Harry", age: 14 },
    { name: "Ethan", age: 30 },
    { name: "Peter", age: 21 },
    { name: "Clark", age: 42 },
    { name: "Alice", age: 16 }
];

// Сортируем по возрасту
persons.sort(function (a, b) {
    return a.age - b.age;
});

console.log(persons);

// Сортируем по имени
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); // ignore upper and lowercase
    var y = b.name.toLowerCase(); // ignore upper and lowercase
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // names must be equal
    return 0;
});

console.log(persons);