Сортировка — один из многих важных методов, которые вы будете использовать при изучении JavaScript. Давайте рассмотрим, как мы используем метод сортировки с различными типами данных.
Строки
Метод сортировки по умолчанию упорядочивает свои элементы в алфавитном порядке.
const names = ['Sophie', 'Fletcher', 'Emmy', 'Izzy', 'Cooper']
const sortNames = names.sort()
console.log(sortNames)
//['Cooper', 'Emmy', 'Fletcher', 'Izzy', 'Sophie']
Мы также можем легко отсортировать этот массив в обратном порядке!
const reversedNames = sortNames.reverse()
console.log(reversedNames)
// ['Sophie', 'Izzy', 'Fletcher', 'Emmy', 'Cooper']
Числа
При сортировке чисел мы используем функцию обратного вызова для обработки сравнения значений.
const nums = [10, 855, 31, 2, 930, 430, 529, 59]
const sortedNums = numbers.sort((a, b) => a - b)
console.log(sortedNums)
//[2, 10, 31, 59, 430, 529, 855, 930]
Строки с числами
Этот пример относится к случаю, когда строка содержит введенное число, которое меньше 10. (Более подробная версия этого примера будет приведена в одном из следующих примеров!). В этом примере мы воспользуемся функцией slice() и превратим строку с введенным числом в число. Таким образом, мы сможем отсортировать все элементы массива, где каждый элемент имеет одинаковый тип данных.
const library = ['Book 1', 'Book 6', 'Book 2', 'Book 4', 'Book 3', 'Book 5']
const sortedLibrary = library.sort((a, b) => {
return +a.slice(-1) - +b.slice(-1)
})
console.log(sortedLibrary)
// ['Book 1', 'Book 2', 'Book 3', 'Book 4', 'Book 5', 'Book 6']
Строки с длинными числами
Для чисел больше 9 можно использовать регулярные выражения для поиска и сортировки элементов на основе их значений.
В этом примере мы будем использовать регулярные выражения.
Регулярные выражения, они же Regex, — это последовательность символов, образующая шаблон поиска. Шаблон поиска можно использовать для поиска и замены текста.
(Regex может быть действительно пугающим, когда с ним сталкиваешься впервые. Лично я до сих пор нахожу его запутанным. Но, несмотря на это, это очень удобный и мощный тип кода, который может быть полезен во многих ситуациях).
Давайте сначала разберем, как будет выглядеть наше регулярное выражение:
const coolRegex = /d+/
-
Первый и последний
/в coolRegex обозначают границы выражения. -
dобозначает цифру -
+означает «1 или более раз».
Итак, в целом, наше регулярное выражение позволяет нам найти элементы, которые больше 9, и отсортировать элементы массива.
Давайте перейдем к нашему полному примеру:
const coolRegex = /d+/;
const longLibrary = [
'Book 339',
'Book 868',
'Book 23',
'Book 90',
'Book 5',
'Book 41',
'Book 375'
]
const sortedLibrary = longLibrary.sort((a, b) => {
return a.match(coolRegex) - b.match(coolRegex)
})
console.log(sortedLibrary)
//['Book 5', 'Book 23', 'Book 41', 'Book 90', 'Book 339', 'Book 375', 'Book 868']
Чтобы лучше понять синтаксис регулярного выражения, я приведу ресурсы в конце этой заметки!
Объекты
Для объектов мы собираемся отсортировать этот массив по значениям id объекта
const users = [
{id: 4, name: 'Jared' },
{id: 8, name: 'Nicolette'},
{id: 2, name: 'Michael'},
{id: 5, name: 'Sade'},
{id: 9, name: 'Megan'},
{id: 1, name: 'Giovanni'},
]
const sorted = users.sort((a, b) => {
return a.id - b.id
})
console.log(sorted)
/*
{id: 1, name: 'Giovanni'}
{id: 2, name: 'Michael'}
{id: 4, name: 'Jared'}
{id: 5, name: 'Sade'}
{id: 8, name: 'Nicolette'}
{id: 9, name: 'Megan'}
*/
Личное замечание:
Regex — это действительно круто, но пока что в своей карьере я лично не использовал его. По большей части я видел, как люди используют regex для оптимизации алгоритмов и решения проблем с типами данных. Если вы используете regex в своих повседневных задачах, дайте мне знать! Мне было бы интересно узнать, как и какие ресурсы вы использовали для изучения.
А новичков, читающих это, прошу не беспокоиться. Постарайтесь впитать все, что сможете, но не чувствуйте давления, чтобы выучить все о regex! Просто постарайтесь понять, как работает regex, использованный в примере.
Ресурсы по регексу:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
https://www.computerhope.com/unix/regex-quickref.htm