Как отсортировать массив объектов в javascript

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

В этом посте мы обсудим, как сортировать массив объектов в JavaScript.

1. Использование Array.sort() метод

Собственный метод JavaScript sort() обычно используется для на месте сортировать элементы массива. sort() метод дополнительно принимает функцию сравнения, которая определяет порядок сортировки. Если x а также y два элемента сравниваются с функцией сравнения comp , то если:

• comp(x, y) < 0 , x предшествует y в отсортированном порядке.
• comp(x, y) = 0 , относительный порядок x а также y остается неизменной.
• comp(x, y) > 0 , x идет после y в отсортированном порядке.

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

The sort() можно использовать для сортировки массива объектов по одному или нескольким их свойствам. В следующем примере кода показано использование sort() метод для сортировки массива объектов с помощью year поле.

Несколько полезных кейсов при работе с массивами в JavaScript

Очень часто на тостере вижу вопросы вида «Как отсортировать массив в JavaScript по определенному правилу?», «Как сделать с массивом в JavaScript <действие>?» и т.д.

Под катом собраны некоторые манипуляции над массивами.

Преобразование массиво-подобного объекта в массив

В es2015 была добавлена замечательная функция Array.from, которая умеет преобразовывать в массив все, что похоже на массив. Принцип ее работы следующий:

1. Если в передаваемом объекте в свойстве [Symbol.iterator] есть функция, она будет использована как генератор для наполнения массива
2. Если в передаваемом объекте есть свойство length, то массив будет составлен из целочисленных индексов объекта от 0 до (object.length — 1)
3. В других случаях она вернет пустой массив

Сумма и произведение массива

Но с суммой нужно быть аккуратнее, если в массиве встретится не числовое значение, то оно будет преобразовано в строку, и начиная с него пойдет конкатенация строк, чтобы этого избежать можно использовать более безопасный вариант:

Поиск в массиве и фильтрация массива

Многие знают о таком замечательном методе как indexOf, который ищет в массиве переданное в первом аргументе значение по точному соответствию (value === element) и возвращает индекс первого совпадения или -1 если ничего не найдено. Так же вторым аргументом можно передать индекс, с которого нужно начать поиск.

Есть похожий на него метод lastIndexOf, работающий аналогично, только поиск производится с конца массива. Но бывают ситуации, когда поиск по точному соответствию не подходит, для этих случаев существуют методы find и findIndex работают они похожим образом, вызывая для каждого элемента функцию, переданную в первом аргументе с параметрами (element, index, array). Поиск осуществляется до тех пор, пока функция не вернет true. find возвращает сам найденный элемент или undefined если ничего не найдено, а findIndex его индекс или -1 соответственно.

Пример, найдем в массиве первый элемент, который больше 5:

Еще одна частая задача, это фильтрация массива. Для этих целей существует метод filter, который возвращает новый массив, состоящий только из тех элементов, для которых функция переданная в первом аргументе вернула true:

Так же иногда бывает нужно просто проверить элементы массива на соответствие некоторому условию, для этого существуют методы some и every, как и предыдущие методы они работают с функцией переданной в первом аргументе:

some возвращает true, если хотя бы для одного аргумента функция вернула true, и false в противном случае
every возвращает false, если хотя бы для одного аргумента функция вернула false, и true в противном случае

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

Сортировка массивов

Для сортировки массива используется метод sort. По умолчанию все элементы сортируются как строки по возрастанию кодов utf-16. Стандартное поведение можно изменить передав первым аргументом функцию-компаратор. Компаратор — это такая функция, которая получает на вход два аргумента (a, b) и должна вернуть: -1, если a идет раньше чем b; 1, если a идет позже чем b; 0, если порядок не важен, то есть аргументы равны. Метод sort довольно лоялен к компаратору и принимает на выходе любые значения меньше 0 как -1, а значения больше 0 как 1.

Важно! Метод sort, хотя и возвращает результат, все операции проводит над исходным массивом. Если необходимо оставить исходный массив без изменений, можно воспользоваться следующим приемом:

Так как метод slice без аргументов возвращает клон массива, метод sort будет работать с этим клоном и в результате его вернет.

Простая сортировка, сравнение элементов как числа

Типобезопасная сортировка

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

Более частая ситуация возникает, когда нужно отсортировать массив однотипных объектов по их свойству, а то и нескольким свойствам сразу, для этого удобно иметь функцию, которая создавала бы нам компаратор на любой случай жизни:

Сортировка подсчетом

Хотя метод sort работает достаточно быстро, на очень больших массивах его скорости может оказаться недостаточно, благо есть метод сортировки который показывает большую производительность при соблюдении 2х условий, а именно — массив достаточно большой (больше 100.000 элементов) и в массиве много повторяющихся значений. Называется он сортировкой подсчетом. Я представлю пример его реализации для сортировки по возрастанию массива из числовых элементов:

Javascript Sort Array Of Objects

In this tutorial, You will see how to sort array of objects in javascript. You will learn to sort an array of objects based on the object property that has different data types like number, string, date.

Table Of Contents

Quick Solution

For quick solution of you problem check out the below code snippet. You can copy and paste the code in your project and run it.

If you want to learn everything in detail then read the full tutorial.

Javascript Sort Array Of Objects By Property

Sorting an array of objects is one of the common tasks in Javascript when working with real-life data.

You can use the properties of objects to sort the array while sorting the values of those properties are compared which give them a position in the array.

To sort an array of objects we are going to use the built-in sort() method.

sort() method has some default setups to sort the things so to sort something according to our requirement we need to pass a compare function to the sort method. Learn the sort method in detail.

The compare function is used to compare two values and return a number. The returned number is used to determine the order of the two elements being compared.

If the returned number is less than 0 then the first value is pushed to the front of the array, if the returned number is greater than 0 then the second value is pushed to the front of the array, if the returned number is equal to 0 then the values are not sorted and are left in the same order.

Let's now use the sort() method to sort an array of objects on the basis of property value.

1. Javascript sort array of objects by string property

To sort an array of objects on the basis of a string property, use the string property name in the compare function.

This way elements will be compared according to that string property and your object will be sorted according to that.

The following example sorts the array of objects on the basis of the name of users.

After running the code you will see the array of objects is sorted on the basis of name alphabetically. The order of the array is as follows: "Mary", "Mike", "Peter", "Sara", "Zoya" .

2. Javascript sort array of objects by number

To sort using number property we are going to use customer credit property from the object.

Now use the credit property in the compare function to sort the array.

After running the code you can see that array is sorted in ascending order of the credit property. The order of the array is as follows: 325, 515, 725, 825, 875 .

To sort the customers in descending order of their credit score just reverse the return sign of the compare function.

report this ad

3. Javascript sort array of objects by date

To sort the array of objects on the basis of the date property first convert the date string into a date object using the new Date() method.

Then use this date object in the compare function.

When you run the code array will be sorted on basis of the birthday property in ascending order. The order of the array is as follows: "1985-3-14", "1992-1-10", "1995-4-12", "1997-5-14", "1999-2-12" .

Stay Ahead, Learn More

Sort By Key In Descending Order

To sort an array of objects in descending order you can perform 2 actions:

1. Sort in descending order
2. Sort in ascending order and then reverse the array

# Example using sort according to credit score

Reverse the sign of the return value of the compare function and your array will be sorted in descending order.

Applying the reverse() method on the array will reverse the array. So you can also sort the array in ascending order and then reverse the array. (But this cause extra overhead in the browser)

Javascript sort array of objects by multiple properties

How would you sort an array of objects based on 2 properties?

Let's say you have to sort based on the customer's group and then on their credit score .

First, you will think that sort the array based on group and then chain another sort based on credit score. But this will not work. Here is how.

You can see the output of the above code, well things didn't go well according to expectations.

So how can we do this sort?

We can sort this based on 2 properties by checking if the group of the first object is the same as the group of the second object. If it is the same then we will sort based on credit score. If it is different then we will sort based on the group.

Conclusion

We have learned and seen various examples of how javascript sort array of objects. You can use the above sort methods to create a visually appealing sortable table. Where you can set the sort order of the columns and you can also sort the table based on multiple properties. Use can use the code discussed in this article and modify it according to your own data.

To display output you can loop through the array of objects and print the properties of the object.

report this ad

report this ad

Array.prototype.sort()

Метод sort() на месте сортирует элементы массива и возвращает отсортированный массив. Сортировка не обязательно устойчива (англ.). Порядок сортировки по умолчанию соответствует порядку кодовых точек Unicode.

Синтаксис

Параметры

Необязательный параметр. Указывает функцию, определяющую порядок сортировки. Если опущен, массив сортируется в соответствии со значениями кодовых точек каждого символа Unicode, полученных путём преобразования каждого элемента в строку.

Возвращаемое значение

Отсортированный массив. Важно, что копия массива не создаётся — массив сортируется на месте.

Описание

Если функция сравнения compareFunction не предоставляется, элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode. Например, слово «Вишня» идёт перед словом «бананы». При числовой сортировке, 9 идёт перед 80, но поскольку числа преобразуются в строки, то «80» идёт перед «9» в соответствии с порядком в Unicode.

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

• Если compareFunction(a, b) меньше 0, сортировка поставит a по меньшему индексу, чем b , то есть, a идёт первым.
• Если compareFunction(a, b) вернёт 0, сортировка оставит a и b неизменными по отношению друг к другу, но отсортирует их по отношению ко всем другим элементам. Обратите внимание: стандарт ECMAscript не гарантирует данное поведение, и ему следуют не все браузеры (например, версии Mozilla по крайней мере, до 2003 года).
• Если compareFunction(a, b) больше 0, сортировка поставит b по меньшему индексу, чем a .
• Функция compareFunction(a, b) должна всегда возвращать одинаковое значение для определённой пары элементов a и b . Если будут возвращаться непоследовательные результаты, порядок сортировки будет не определён.

Итак, функция сравнения имеет следующую форму:

Для числового сравнения, вместо строкового, функция сравнения может просто вычитать b из a . Следующая функция будет сортировать массив по возрастанию:

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

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

Примеры

Пример: создание, отображение и сортировка массива

В следующем примере создаётся четыре массива, сначала отображается первоначальный массив, а затем они сортируются. Числовые массивы сортируются сначала без, а потом с функцией сравнения.

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

Пример: сортировка не-ASCII символов

Для сортировки строк с не-ASCII символами, то есть строк с символами акцента (e, é, è, a, ä и т.д.), строк, с языками, отличными от английского: используйте String.localeCompare . Эта функция может сравнивать эти символы, чтобы они становились в правильном порядке.

Пример: сортировка c помощью map

Функция сравнения (compareFunction) может вызываться несколько раз для каждого элемента в массиве. В зависимости от природы функции сравнения, это может привести к высоким расходам ресурсов. Чем более сложна функция сравнения и чем больше элементов требуется отсортировать, тем разумнее использовать map для сортировки. Идея состоит в том, чтобы обойти массив один раз, чтобы извлечь фактические значения, используемые для сортировки, во временный массив, отсортировать временный массив, а затем обойти временный массив для получения правильного порядка.