Как сортировать массивы объектов по свойствам в JavaScript

Возможно, вы уже сортировали строки или числа, но для начинающих разработчиков JavaScript сортировка объектов может быть немного сложнее. Давайте посмотрим, как это делается, и вскоре вы станете сортировать как профессионал.

Данные массива JavaScript

Предположим, у нас есть массив объектов, составляющих каталог компании. Это может выглядеть примерно так:

const directory = [
  {
    firstName: "Joe",
    lastName: "Williams",
    position: "Accountant",
    salary: 41000
  },{
    firstName: "Helen",
    lastName: "Johnson",
    position: "Manager",
    salary: 125000
  },{
    firstName: "Pat",
    lastName: "Rogers",
    position: "Receptionist",
    salary: 32000
  }
]

Теперь предположим, что мы хотим отсортировать этот массив по фамилии. Объект Array в JavaScript имеет встроенную функцию сортировки. Но поскольку наш массив объектов настроен для каталога нашей компании, мы не можем просто вызвать функцию, не предоставив ей небольшой помощи. Нам нужно сказать ему, как мы хотим, чтобы наши объекты сортировались. Функция сортировки позволяет нам передать параметр, в котором мы определяем функцию для сравнения наших объектов.

Функция сравнения

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

Давайте посмотрим на это в коде, а затем обсудим, как это работает.

function compareByLastName(a, b) {
  if (a.lastName < b.lastName)
    return -1;
  else if (a.lastName > b.lastName)
    return 1;
  else
    return 0;
}

directory.sort(compareByLastName);

Во-первых, мы объявили функцию сравнения, которую назвали compareByLastName. Функция sort будет передавать пары объектов из массива в нашу функцию (в качестве параметров с именами a и b). Поскольку нас интересует именно lastName (а не сами объекты), мы ссылаемся на это свойство каждого объекта и сравниваем их. Мы возвращаем число в зависимости от того, какое из них идет первым. Функция сортировки использует эти результаты, чтобы определить, где находятся все объекты в нашем отсортированном массиве.

Важно отметить, что исходный массив каталогов отсортирован на месте. Операция сортировки возвращает массив, но это всего лишь ссылка на оригинал. Это означает, что если у вас есть другие операции, использующие этот массив, они не могут ожидать сохранения исходного порядка после его сортировки. Если это желательно, перед сортировкой следует сделать копию.

Сортировка в обратном порядке

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

function compareByLastNameDesc(a, b) {
  if (a.lastName < b.lastName)
    return 1;
  else if (a.lastName > b.lastName)
    return -1;
  else
    return 0;
}

directory.sort(compareByLastNameDesc);

Если вы внимательно посмотрите, то увидите, что мы только поменяли местами положительные/отрицательные знаки в операторах return. Эта убывающая версия функции сравнения указывает алгоритму сортировки размещать имена с более поздними буквами перед именами с более ранними буквами в алфавите.

Как видите, передавая наши собственные функции сравнения во встроенную функцию сортировки, мы получаем полный контроль над тем, как сортируются наши объекты.

Удачной сортировки!