How to sort array js

Как делать сортировку в JavaScript при помощи sort()

🥳 Подписывайтесь на мой Twitter! ↪️ @stassonmars — теперь там ещё больше из мира фронтенда, да и вообще поговорим. 🪀Подписывайтесь, скоро будет много нового и ещё больше интересного ✨

Сортировка массива в алфавитном порядке

Выполнить такую сортировку довольно просто. Просто вызовите array.sort() без любых параметров:

А теперь, перед тем, чтобы расслабиться, посмотрите на то, что случится когда мы вызовем array.sort() на массиве из чисел:

Хотя 7 в численном порядке меньше, чем 40 или 300, в лексикографическом порядке, семёрка больше, таким образом она оказывается в правее всех в отсортированном массиве. Всегда имейте в виду, что по-дефолту array.sort() сортирует элементы в лексикографическом порядке.

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

Передаём функцию в array.sort()

Как говорилось выше, array.sort() допускает дополнительные параметры в виде функций (давайте назовем её sortfunction ). Формат такой функции будет выглядеть таким образом:

При нуле: a и b будут рассматриваться как равные и сортировка производиться не будет.

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

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

Сортировка массива в числовом порядке, но по убывающей, отличается не многим и всего лишь требует реверса двух операндов a и b :

Делаем случайный порядок у массива

Чтобы перетасовать элементы в массиве нам нужно, чтобы sortfunction возвращал 0 рандомно, независимо от того, что выдаст a и b. Вот небольшой трюк с этим делом:

Как вы видите у array.sort() есть тайные стороны. На самом деле, вы даже можете сортировать массивы, которые содержат не только примитивы, а объекты со свойствами. Давайте рассмотрим этот вариант:

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

Сейчас мы пойдем дальше и предположим, что ваш массив содержит не только простые численные или строковые значения, а вместо них объекты со свойствами:

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

Сортировка по возрасту

Итак, давайте начнем сортировать наш массив employees по возрасту сотрудников в возрастающем порядке. Вот функция сравнения, которая это сделает:

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

Сортировка по дате

И наконец, предположим, что вам нужно отсортировать сотрудников по их дате выхода на пенсию. Эта информация хранится в свойстве retiredate и чтобы сделать всё интереснее, это будет не объект с датой, а просто строка. Что нам нужно сделать первым делом, так это создать валидный объект даты из строки даты выхода на пенсию, хоть впоследствии процесс и будет таким же, как и сортировка по числам:

Это отсортирует массив таким образом, что работник, выходящий на пенсию раньше всех, появится первым. employees[0] теперь будет Sarah. Это сработает, потому что JavaScript даст вам сравнить и/или сделать арифметические вычисления на объекте даты, который в первую очередь автоматически сконвертируется в числовой вид.

JavaScript Sorting Arrays

Sorting an Array

The sort() method sorts an array alphabetically:

Example

Reversing an Array

The reverse() method reverses the elements in an array.

You can use it to sort an array in descending order:

Example

Numeric Sort

By default, the sort() function sorts values as strings.

This works well for strings («Apple» comes before «Banana»).

However, if numbers are sorted as strings, «25» is bigger than «100», because «2» is bigger than «1».

Because of this, the sort() method will produce incorrect result when sorting numbers.

You can fix this by providing a compare function:

Example

Use the same trick to sort an array descending:

Example

The Compare Function

The purpose of the compare function is to define an alternative sort order.

The compare function should return a negative, zero, or positive value, depending on the arguments:

When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

If the result is 0 no changes are done with the sort order of the two values.

Example:

When comparing 40 and 100, the sort() method calls the compare function(40, 100).

You can use this code snippet to experiment with numerically and alphabetically sorting:

Array.prototype.sort()

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

Try it

Syntax

Parameters

Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character’s Unicode code point value.

The first element for comparison.

The second element for comparison.

Return value

The reference to the original array, now sorted. Note that the array is sorted in place, and no copy is made.

Description

If compareFn is not supplied, all non- undefined array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order. For example, «banana» comes before «cherry». In a numeric sort, 9 comes before 80, but because numbers are converted to strings, «80» comes before «9» in the Unicode order. All undefined elements are sorted to the end of the array.

If compareFn is supplied, all non- undefined array elements are sorted according to the return value of the compare function (all undefined elements are sorted to the end of the array, with no call to compareFn ).

So, the compare function has the following form:

More formally, the comparator is expected to have the following properties, in order to ensure proper sort behavior:

The default lexicographic comparator satisfies all constraints above.

The sort method can be conveniently used with function expressions or arrow functions.

Arrays of objects can be sorted by comparing the value of one of their properties.

Examples

Creating, displaying, and sorting an array

The following example creates four arrays and displays the original array, then the sorted arrays. The numeric arrays are sorted without a compare function, then sorted using one.

Sorting non-ASCII characters

Sorting with map

The compareFn can be invoked multiple times per element within the array. Depending on the compareFn ‘s nature, this may yield a high overhead. The more work a compareFn does and the more elements there are to sort, it may be more efficient to use map() for sorting. The idea is to traverse the array once to extract the actual values used for sorting into a temporary array, sort the temporary array, and then traverse the temporary array to achieve the right order.

There is an open source library available called mapsort which applies this approach.

sort() returns the reference to the same array

The sort() method returns a reference to the original array, so mutating the returned array will mutate the original array as well.

Sort stability

Since version 10 (or EcmaScript 2019), the specification dictates that Array.prototype.sort is stable.

For example, say you had a list of students alongside their grades. Note that the list of students is already pre-sorted by name in alphabetical order:

After sorting this array by grade in ascending order:

The students variable will then have the following value:

It’s important to note that students that have the same grade (for example, Alex and Devlin), will remain in the same order as before calling the sort. This is what a stable sorting algorithm guarantees.

Before version 10 (or EcmaScript 2019), sort stability was not guaranteed, meaning that you could end up with the following:

Sorting with non-well-formed comparator

If a comparing function does not satisfy all of purity, stability, reflexivity, symmetry, and transitivity rules, as explained in the description, the program’s behavior is not well-defined.

For example, consider this code:

Due to this implementation inconsistency, you are always advised to make your comparator well-formed by following the five constraints.

Методы массивов

Массивы предоставляют множество методов. Чтобы было проще, в этой главе они разбиты на группы.

Добавление/удаление элементов

Мы уже знаем методы, которые добавляют и удаляют элементы из начала или конца:

splice

Как удалить элемент из массива?

Так как массивы – это объекты, то можно попробовать delete :

Поэтому для этого нужно использовать специальные методы.

Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.

Этот метод проще всего понять, рассмотрев примеры.

Начнём с удаления:

В следующем примере мы удалим 3 элемента и заменим их двумя другими.

Здесь видно, что splice возвращает массив из удалённых элементов:

Метод splice также может вставлять элементы без удаления, для этого достаточно установить deleteCount в 0 :

В этом и в других методах массива допускается использование отрицательного индекса. Он позволяет начать отсчёт элементов с конца, как тут:

slice

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end ). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.

concat

Метод arr.concat создаёт новый массив, в который копирует данные из других массивов и дополнительные значения.

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

Если аргумент argN – массив, то все его элементы копируются. Иначе скопируется сам аргумент.

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

Для корректной обработки в объекте должны быть числовые свойства и length :

Перебор: forEach

Метод arr.forEach позволяет запускать функцию для каждого элемента массива.

Например, этот код выведет на экран каждый элемент массива:

А этот вдобавок расскажет и о своей позиции в массиве:

Результат функции (если она вообще что-то возвращает) отбрасывается и игнорируется.

Поиск в массиве

Далее рассмотрим методы, которые помогут найти что-нибудь в массиве.

indexOf/lastIndexOf и includes

Методы arr.indexOf, arr.lastIndexOf и arr.includes имеют одинаковый синтаксис и делают по сути то же самое, что и их строковые аналоги, но работают с элементами вместо символов:

Кроме того, очень незначительным отличием includes является то, что он правильно обрабатывает NaN в отличие от indexOf/lastIndexOf :

find и findIndex

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

Здесь пригодится метод arr.find.

Его синтаксис таков:

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

В реальной жизни массивы объектов – обычное дело, поэтому метод find крайне полезен.

filter

На тот случай, если найденных элементов может быть много, предусмотрен метод arr.filter(fn).

Преобразование массива

Перейдём к методам преобразования и упорядочения массива.

Метод arr.map является одним из наиболее полезных и часто используемых.

Он вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.

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

sort(fn)

Вызов arr.sort() сортирует массив на месте, меняя в нём порядок элементов.

Не заметили ничего странного в этом примере?

По умолчанию элементы сортируются как строки.

Функция должна для пары значений возвращать:

Например, для сортировки чисел:

Теперь всё работает как надо.

Давайте возьмём паузу и подумаем, что же происходит. Упомянутый ранее массив arr может быть массивом чего угодно, верно? Он может содержать числа, строки, объекты или что-то ещё. У нас есть набор каких-то элементов. Чтобы отсортировать его, нам нужна функция, определяющая порядок, которая знает, как сравнивать его элементы. По умолчанию элементы сортируются как строки.

Кстати, если мы когда-нибудь захотим узнать, какие элементы сравниваются – ничто не мешает нам вывести их на экран:

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

На самом деле от функции сравнения требуется любое положительное число, чтобы сказать «больше», и отрицательное число, чтобы сказать «меньше».

Это позволяет писать более короткие функции:

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

Будет работать точно так же, как и более длинная версия выше.

reverse

Метод arr.reverse меняет порядок элементов в arr на обратный.

Он также возвращает массив arr с изменённым порядком элементов.

split и join

В примере ниже таким разделителем является строка из запятой и пробела.

У метода split есть необязательный второй числовой аргумент – ограничение на количество элементов в массиве. Если их больше, чем указано, то остаток массива будет отброшен. На практике это редко используется:

Вызов split(s) с пустым аргументом s разбил бы строку на массив букв:

reduce/reduceRight

Методы arr.reduce и arr.reduceRight похожи на методы выше, но они немного сложнее. Они используются для вычисления какого-нибудь единого значения на основе всего массива.

Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.

При вызове функции результат её вызова на предыдущем элементе массива передаётся как первый аргумент.

Этот метод проще всего понять на примере.

Тут мы получим сумму всех элементов массива всего одной строкой:

Давайте детальнее разберём, как он работает.

Поток вычислений получается такой:

В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:

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

Мы также можем опустить начальное значение:

Результат – точно такой же! Это потому, что при отсутствии initial в качестве первого значения берётся первый элемент массива, а перебор стартует со второго.

Таблица вычислений будет такая же за вычетом первой строки.

Но такое использование требует крайней осторожности. Если массив пуст, то вызов reduce без начального значения выдаст ошибку.

Поэтому рекомендуется всегда указывать начальное значение.

Метод arr.reduceRight работает аналогично, но проходит по массиву справа налево.

Array.isArray

Массивы не образуют отдельный тип языка. Они основаны на объектах.

Поэтому typeof не может отличить простой объект от массива:

Большинство методов поддерживают «thisArg»

Этот параметр не объяснялся выше, так как очень редко используется, но для наиболее полного понимания темы мы обязаны его рассмотреть.

Вот полный синтаксис этих методов:

Например, вот тут мы используем метод объекта army как фильтр, и thisArg передаёт ему контекст:

Итого

Шпаргалка по методам массива:

Для добавления/удаления элементов:

Для поиска среди элементов:

Для перебора элементов:

Для преобразования массива:

Изученных нами методов достаточно в 99% случаев, но существуют и другие.

Полный список есть в справочнике MDN.

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

Внимательно изучите шпаргалку, представленную выше, а затем, чтобы попрактиковаться, решите задачи, предложенные в данной главе. Так вы получите необходимый опыт в правильном использовании методов массива.

Всякий раз, когда вам будет необходимо что-то сделать с массивом, а вы не знаете, как это сделать – приходите сюда, смотрите на таблицу и ищите правильный метод. Примеры помогут вам всё сделать правильно, и вскоре вы быстро запомните методы без особых усилий.

Задачи

Переведите текст вида border-left-width в borderLeftWidth

То есть дефисы удаляются, а все слова после них получают заглавную букву.

JavaScript Array sort: Sorting Array Elements

Summary: in this tutorial, you will learn how to use the JavaScript Array sort() method to sort arrays of numbers, string, and objects.

Introduction to JavaScript Array sort() method

The sort() method allows you to sort elements of an array in place. Besides returning the sorted array, the sort() method changes the positions of the elements in the original array.

By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest value last.

The sort() method casts elements to strings and compares the strings to determine the orders.

Consider the following example:

In this example, the sort() method places 10 before 2 because the string “10” comes before “2” when doing a string comparison.

To fix this, you need to pass a compare function to the sort() method. The sort( ) method will use the compare function to determine the orders of elements.

The following illustrates the syntax of the sort() method:

The sort() method accepts an optional argument which is a function that compares two elements of the array.

If you omit the compare function, the sort() method sorts the elements with the sort order based on the Unicode code point values of elements as mentioned earlier.

The compare function of the sort() method accepts two arguments and returns a value that determines the sort order. The following illustrates the syntax of the compare function:

To fix the issue of sorting the number, you can use the following syntax:

Or you can define the comparison function using the arrow function syntax:

And the following is the simplest since the elements of the array are numbers:

Sorting an array of strings

Suppose you have an array of string named animals as follows:

To sort the elements of the animals array in ascending order alphabetically, you use the sort() method without passing the compare function as shown in the following example:

To sort the animals array in descending order, you need to change the logic of the compare function and pass it to the sort() method as the following example.

Suppose you have an array that contains elements in both uppercase and lowercase as follows:

To sort this array alphabetically, you need to use a custom compare function to convert all elements to the same case e.g., uppercase for comparison and pass that function to the sort() method.

Sorting an array of strings with non-ASCII characters

The sort() method is working fine with the strings with ASCII characters. However, for the strings with non-ASCII characters e.g., é, è, etc., the sort() method will not work correctly. For example:

As you see, the écureuil string should come before the zèbre string.

To resolve this, you use the localeCompare() method of the String object to compare strings in a specific locale, like this:

The elements of the animaux array now are in the correct order.

Sorting an array of numbers

Suppose you have an array of numbers named scores as in the following example.

To sort an array of numbers numerically, you need to pass into a custom comparison function that compares two numbers.

The following example sorts the scores array numerically in ascending order.

To sort an array of numbers numerically in descending order, you just need to reverse the logic in the compare function as shown in the following example:

Sorting an array of objects by a specified property

Sorting objects by a numeric property

The following example shows how to sort the employees by salary in ascending order.

This example is similar to the example of sorting an array of numbers in ascending order. The difference is that it compares the salary property of two objects instead.

Sorting objects by a string property

To sort the employees array by name property case-insensitively, you pass the compare function that compares two strings case-insensitively as follows:

Sorting objects by the date property

Suppose, you wish to sort employees based on each employee’s hire date.

The hire date data is stored in the hireDate property of the employee object. However, it is just a string that represents a valid date, not the Date object.

Therefore, to sort employees by hire date, you first have to create a valid Date object from the date string, and then compare two dates, which is the same as comparing two numbers.

Here is the solution:

Optimizing JavaScript Array sort() method

In fact, the sort() method calls the compare function multiple times for each element in the array.

See the following example:

As shown in the output above, each element has been evaluated multiple times e.g., Amazon 4 times, Congo 2 times, etc.

If the number of array elements is increasing, it will potentially decrease the performance.

You cannot reduce the number of times that comparison function is executed. However, you can reduce the work that the comparison has to do. This technique is called Schwartzian Transform.

To implement this, you follow these steps:

Here is the solution:

In this tutorial, you have learned how to use the JavaScript Array sort() method to sort arrays of strings, numbers, dates, and objects.