Как отсортировать массив объектов с помощью метода JS Sort

Метод JavaScript Sort() — это встроенная функция, которую мы можем легко использовать для сортировки массива элементов в JavaScript. Однако логика и способ применения метода сортировки отличаются в зависимости от типа данных элементов массива (строка, число, объект и т.д.).
В этой статье вы узнаете, как сортировать массив для строк, чисел, дат и объектов.

Как работает метод Sort()?

Метод sort() используется для упорядочивания или изменения расположения элемента в массиве на основе условия.

Метод sort() может упорядочить цифры от -1 до 9, от A до Z, от a до z, вопрос в том, как использовать метод sort() с цифрами вне этого диапазона, продолжайте читать, это будет объяснено подробно.

ПРИМЕЧАНИЕ: Метод sort() имеет приоритет от -1 до 9, от A до Z, от a до z. Т.е. в массиве, где у нас есть комбинация цифр (от -1 до 9), заглавных букв (A — Z) и строчных букв (a — z), метод sort() будет рассматривать цифры, затем заглавную букву, затем строчную.

Зачем мне нужен метод sort()?

Метод sort широко используется во многих сценариях работы.
Ниже приведены некоторые сценарии, в которых вы можете использовать метод sort().

• Представьте API, который возвращает массив статей, и каждая статья имеет ключ, показывающий количество просмотров, где вам нужно отобразить 10 самых просматриваемых статей. (сортировка по количеству).

• Представьте массив стран, которые нужно отобразить в алфавитном порядке (сортировка по строке)

• Представьте себе массив товаров в магазине, который нужно отобразить в зависимости от того, когда он был добавлен (сортировка по дате).

Давайте начнем правильно.

Как отсортировать массив строк в порядке возрастания.

К счастью, метод sort() по умолчанию сортирует элементы в алфавитном порядке от (a-z). В результате приведенный ниже код должен упорядочить массив строк по возрастанию.

//array of strings
const list_of_animals = ["goat", "antelope", "horse", "fox", "cat"];

list_of_animal.sort()
//[ 'antelope', 'cat', 'fox', 'goat', 'horse' ]

Как отсортировать массив строк в порядке убывания

Чтобы отсортировать массив строк по убыванию, необходимо использовать метод reverse() с методом sort().
Метод sort() сортирует массив по возрастанию, а метод reverse() изменяет порядок элементов массива на обратный.

//array of strings
const list_of_animals = ["goat", "antelope", "horse", "fox", "cat"];

list_of_animals.sort().reverse()
//[ 'horse', 'goat', 'fox', 'cat', 'antelope' ]

Примечание: Приведенный выше метод будет работать в том случае, если все элементы массива имеют одинаковый регистр (прописной или строчный).

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

const list_of_animals = ["goat", "antelope", "Horse", "fox", "Cat"];

list_of_animals.sort()
//[ 'Cat', 'Horse', 'antelope', 'fox', 'goat']

Это не неожиданный результат, просто метод sort() работает на основе старшинства, и в подобных случаях все, что нам нужно сделать, это преобразовать каждый элемент в один регистр перед применением метода сортировки. Приведенный ниже код должен работать нормально

const list_of_animals = ["goat", "antelope", "Horse", "fox", "Cat"];

list_of_animals.map((list)=>list.toLowerCase()).sort()
//[ 'antelope', 'cat', 'fox', 'goat', 'horse' ]

Круто, давайте перейдем к массиву чисел

Как отсортировать массив чисел

Сортировка массива чисел не так проста, как сортировка строк. Как было сказано ранее, метод sort по умолчанию сортирует массив чисел в диапазоне от -1 до 9. Поэтому применение метода sort() к массиву чисел даст неожиданный ответ. Например

//array of numbers
const animal_count = [62, 42, 12, 3, 7];

animal_count.sort()
//[ 12, 3, 42, 62, 7 ]

Из результата видно, что массив сортируется по первому символу в каждом числе, а это не то, что нам нужно.

Поэтому, чтобы иметь возможность сортировать массив чисел, нам нужна дополнительная функция сравнения для поддержки метода sort().
Функция сравнения будет принимать два аргумента, за которыми следует утверждение, например:

function(x, y) {return x - y}

//The result will be positive if x is greater
//The result will be negative if y is greater
//The result will be zero if x and y are equal

К счастью, метод sort() может соответствующим образом сортировать положительные, нулевые и отрицательные значения.
Таким образом, при использовании метода sort() в сочетании с функцией сравнения, метод sort() сравнивает два значения, отправляет их в нашу функцию сравнения, а затем сортирует значения на основе возвращенного значения.

Как отсортировать массив чисел по возрастанию.

Сортировка массива чисел по возрастанию, т.е. от наименьшего числа к наибольшему.

animal_count?.sort((x, y) => x - y);
// 3, 7, 12, 42, 62 ]

Как отсортировать массив чисел в порядке убывания

Мы сортируем массив чисел по убыванию, то есть от наибольшего числа к наименьшему.

animal_count?.sort((x, y) => y - x);
// [ 62, 42, 12, 7, 3 ]

Как отсортировать массив дат в порядке возрастания

Сортировка массива дат по возрастанию, т.е. от наименьшей даты к наибольшей.

const date_added = ["2022-07-15T17:10:57.720274+01:00", "2022-07-15T17:12:57.720274+01:00", "2022-07-14T17:10:00.720274+01:00", "2022-07-13T17:09:57.720274+01:00", "2022-07-15T17:10:50.720274+01:00"];

date_added?.sort((x, y) => new Date(x) - new Date(y));

/* [
 '2022-07-13T17:09:57.720274+01:00',
 '2022-07-14T17:10:00.720274+01:00',
 '2022-07-15T17:10:50.720274+01:00',
 '2022-07-15T17:10:57.720274+01:00',
 '2022-07-15T17:12:57.720274+01:00'
 ] */

Как отсортировать массив дат в порядке убывания

Сортировка массива дат по возрастанию, т.е. от наибольшей даты к последней:

const date_added = ["2022-07-15T17:10:57.720274+01:00", "2022-07-15T17:12:57.720274+01:00", "2022-07-14T17:10:00.720274+01:00", "2022-07-13T17:09:57.720274+01:00", "2022-07-15T17:10:50.720274+01:00"];

date_added?.sort((x, y) => new Date(y) - new Date(x));

/*[
 '2022-07-15T17:12:57.720274+01:00',
 '2022-07-15T17:10:57.720274+01:00',
 '2022-07-15T17:10:50.720274+01:00',
 '2022-07-14T17:10:00.720274+01:00',
 '2022-07-13T17:09:57.720274+01:00'
 ]*/

Как отсортировать массив объектов по любому значению ключа

Рассматривая представленный ниже массив объектов, мы можем отсортировать его по любому из ключей (id, name, count, date_added), основываясь на том, что вы узнали в этой статье. Однако я покажу вам, как сортировать по date_added и по name:

//array of object
const activity_history = [
    {
      id: "1",
      name: "goat",
      count: 62,
      date_added: "2022-07-15T17:10:57.720274+01:00"
    },
    {
      id: "2",
      name: "antelope",
      count: 42,
      date_added: "2022-07-15T17:12:57.720274+01:00"
    },
    {
      id: "3",
      name: "horse",
      count: 12,
      date_added: "2022-07-14T17:10:00.720274+01:00"
    },
    {
      id: "4",
      name: "fox",
      count: 3,
      date_added: "2022-07-13T17:09:57.720274+01:00"
    },
    {
      id: "5",
      name: "cat",
      count: 7,
      date_added: "2022-07-15T17:10:50.720274+01:00"
    }
  ];

Как отсортировать массив объектов по дате в порядке возрастания

activity_history?.sort(
    (x, y) => new Date(x.date_added) - new Date(y.date_added)
  );

Как отсортировать массив объектов по дате в порядке убывания

activity_history?.sort(
    (x, y) => new Date(y.date_added) - new Date(x.date_added)
  );

Как отсортировать массив объектов по имени в порядке возрастания

 activity_history.sort((x, y)=>{
    if(x.name < y.name) { return -1; }
    if(x.name > y.name) { return 1; }
    return 0;
  })

Как отсортировать массив объектов по имени в порядке убывания

 activity_history.sort((x, y)=>{
    if(y.name < x.name) { return -1; }
    if(y.name > x.name) { return 1; }
    return 0;
  })

Заключение

Ну вот и все. Надеюсь, вы узнали и поняли, как легко использовать метод sort() для различных типов данных на многочисленных примерах работы методов.
Спасибо за чтение 🌟🎉

Буду рад пообщаться с вами в Twitter.

Счастливого кодинга!