В моей сегодняшней статье я покажу вам, как метод сортировки (Array.prototype.sort()) работает в JavaScript, его логику и как вы можете использовать его для сортировки массива.
ВВЕДЕНИЕ
Прототип массива sort() используется для сортировки элементов в массиве в зависимости от предоставленной логики, а затем возвращает ссылку на тот же массив, теперь уже отсортированный.
Порядок по умолчанию метода sort() — восходящий, и он работает путем преобразования элементов массива в строки, а затем упорядочивания их в соответствии со значением кодовой точки Unicode для каждого символа.
Метод sort() принимает функцию обратного вызова, и эта функция будет содержать некоторую логику, которая будет использоваться для правильной сортировки массива.
ЧТО МЫ БУДЕМ ДЕЛАТЬ
Я буду использовать метод sort() для массива, а затем предоставлю функцию обратного вызова, которая фактически выполнит сортировку.
Если мне нужно отсортировать массив чисел [3,4,5,2,1] в порядке возрастания, я буду использовать логику ( a > b ) для сравнения каждого элемента, и она вернет элемент, чье значение кодовой точки меньше, чем у следующего отсортированного.
ПОГОВОРИМ О КОДОВЫХ ПУНКТАХ
Согласно Wise geek, кодовая точка относится к определенному числовому значению, которое обозначает любой отдельный символ в наборе символов.
Это означает, что каждый символ на вашей клавиатуре имеет кодовую точку в наборе символов.
Теперь вы можете спросить: «Что же такое набор символов?»
Ну, набор символов похож на многоязычный словарь, который объясняет компьютеру, какие числа соответствуют каким символам.
Таким образом, символ верхнего регистра «А» имеет кодовую точку «65», а символ нижнего регистра «а» имеет кодовую точку «97» в наборе символов.
Это означает, что если бы мы сортировали массив букв в порядке возрастания, прописные буквы сортировались бы первыми перед буквами нижнего регистра, а если бы мы сортировали массив букв в порядке убывания, то символы нижнего регистра сортировались бы первыми перед буквами верхнего регистра. .
Это происходит из-за их кодовых точек в наборе символов.
Это имеет смысл, верно? 😃
Давайте посмотрим, как мы можем получить кодовые точки символов в JavaScript.
ПОЛУЧИТЬ КОДОВЫЕ ПУНКТЫ ПЕРСОНАЖЕЙ
Чтобы получить кодовую точку символа в javascript, я буду использовать строковый метод codePointAt() в строке.
//uppercase A
console.log("A".codePointAt())
//65
//lowercase a
console.log("a".codePointAt())
//97
Таким образом, вы можете видеть, что заглавная буква стоит перед строчной буквой из-за ее кодовой точки в наборе символов.
Теперь давайте попробуем то, что мы уже узнали, на массиве.
СОРТИРОВКА МАССИВА
Вспомните, что мы говорили о методе сортировки и логике, которую мы будем использовать в его функции обратного вызова, чтобы заставить его сортировать наш массив.
В моем первом примере я отсортирую массив в порядке возрастания и буду использовать логику ( a › b ) в его функции обратного вызова.
//sort in ascending order
["a", "C", "b", "A", "c", "B"].sort( (a, b) => {
return (a > b)
})
//Array(6) [ "A", "B", "C", "a", "b", "c" ]
Таким образом, вы можете видеть, что массив был отсортирован путем расположения заглавных букв перед строчными буквами в порядке возрастания.
Во втором примере я отсортирую массив в порядке убывания, используя логику ( b › a ) в своей функции обратного вызова.
//sort in descending order
["a", "C", "b", "A", "c", "B"].sort( (a, b) => {
return (b > a)
})
//Array(6) [ "c", "b", "a", "C", "B", "A" ]
Вы можете видеть, что массив был отсортирован путем размещения строчных букв перед прописными буквами в порядке убывания.
С моим объяснением мы можем даже отсортировать массив, содержащий имена людей в порядке возрастания, и он отсортирует его очень хорошо.
//sort in ascending order
["john", "jane", "jade", "joseph"].sort( (a, b) => {
return (a > b)
})
//Array(4) [ "jade", "jane", "john", "joseph" ]
Он работает, суммируя кодовые точки каждого символа в строке, а затем располагая их в порядке возрастания.
Это даст вам лучшее представление о том, что компьютер делает под капотом.
Приведенный ниже код вычисляет сумму кодовых точек каждого символа в элементе массива.
let output = []
//function to calculate code point values
const calcCodePoint = (val) => {
//store the total code point number of a string
let totalCodePoint = 0
//get the code point total of the string
val.split('').forEach( (el) => totalCodePoint+=el.charCodeAt())
//add result to the array
return output.push(totalCodePoint)
}
//loop through the array and calculate their code point values
["john", "jane", "jade", "joseph"].forEach(calcCodePoint)
//sort the result
output.sort( (a, b) => {
return (a - b)
})
//Array(4) [ 404, 414, 431, 649 ]
Таким образом, вы можете видеть, что элемент с общей кодовой точкой 404 (нефрит) был расположен первым, а элемент с общей кодовой точкой 649 (джозеф) был расположен последним, и именно так наш массив фактически сортируется. 😎
Надеюсь, теперь вы понимаете.
НЕ ДЕЛАЙТЕ ОШИБОК
Если вы пытаетесь отсортировать массив строк, содержащих буквы, перед сортировкой убедитесь, что вы преобразовали их в нижний регистр уже с помощью строкового метода toLowerCase().
Такая сортировка массива, вероятно, заставит вас почувствовать, что функция сортировки бесполезна, но это не так!
Обратите внимание на заглавные буквы в «John», «Jane» и «jOseph».
//sort in ascending order
["John", "Jane", "jade", "jOseph"].sort( (a, b) => {
return (a > b)
})
//Array(4) [ "Jane", "John", "jOseph", "jade" ]
Это компьютер, и он был запрограммирован на вычисление кодовых точек символов на основе набора символов, прежде чем действовать на нем!
Кроме того, не пытайтесь сортировать массив, содержащий строки и числа, потому что результат будет не таким, как вы ожидаете увидеть 😅
//sort in ascending order
["1", "3", "a", "4", "2", 5].sort( (a, b) => {
return (a > b)
})
//Array(6) [ "1", "2", "3", "4", "a", 5 ]
//sort in ascending order
[1, 2, "a", "4", "2", "80", "9"].sort( (a, b) => {
return (a > b)
})
//Array(7) [ 1, 2, "2", "4", "80", "9", "a" ]
В Mozilla Docs есть объяснение этому;
При числовой сортировке 9 предшествует 80, но поскольку числа преобразуются в строки, «80» предшествует «9» в порядке Unicode
Так что не вините свой компьютер или JS Engine, потому что теперь у вас есть четкое представление о символах и их кодовых номерах, а также о том, как они сортируются.
А ЧИСЛА?
Ну, числа не упущены, потому что вы можете сортировать их либо в порядке возрастания, либо в порядке убывания, и это заставляет заметить, что метод сортировки преобразует элементы массива в строки, прежде чем воздействовать на него, и причина, по которой он преобразуется в строку, чтобы получить номер его кодовой точки.
Если у меня есть баллы учеников в моем классе в виде массива, я отсортирую их в порядке возрастания следующим образом;
//sort in ascending order
[344,500,222,132,90,50].sort( (a, b) => {
return (a > b)
})
//or
[344,500,222,132,90,50].sort( (a, b) => {
return (a - b)
})
//Array(6) [ 50, 90, 132, 222, 344, 500 ]
То же самое касается строк чисел.
Поскольку массив может содержать строки чисел, мы будем использовать логику (a - b) для сортировки массива в порядке возрастания, а если мы хотим отсортировать массив в порядке убывания, мы будем использовать логику(b - a).
Это рекомендуемый способ сортировки массива, содержащего числа или цепочки чисел.
Взгляните на разницу ниже;
//❌ not recommended 👇
//sort in ascending order
["344",500, "222",132, "90", "50"].sort( (a, b) => {
return (a > b)
})
//Array(6) [ 132, "222", "344", "50", "90", 500 ]
// ✅ recommended 👇
//sort in ascending order
["344",500, "222",132, "90", "50"].sort( (a, b) => {
return (a - b)
})
//Array(6) [ "50", "90", 132, "222", "344", 500 ]
Надеюсь, сегодня вы узнали что-то впечатляющее.
Рекомендуется использовать логику (a > b) для строк в зависимости от порядка, в котором вы хотите, чтобы ваши результаты отображались, и логику (a - b) для чисел или строк чисел в зависимости от порядка, в котором вы хотите, чтобы ваши результаты отображались.
Перейдите по этой ссылке на документацию Mozilla, если вы хотите узнать больше о методе сортировки в JavaScript.
ЭТО ВЕСЕЛОЕ ВРЕМЯ
Я видел много споров по этому вопросу.
«Курица и яйцо, что было раньше?» 😅
Что ж, думаю, программисты высказали нам свое мнение по этому поводу.
Если мне нужно получить кодовую точку Unicode смайликов яйца и курицы, это число, которое я вижу;
//code point of egg console.log( "🥚".codePointAt() ) //129370 //code point of chicken console.log( "🐥".codePointAt() ) //128037
Глядя на результат выше, вы могли догадаться, что курица появилась раньше яйца, и если я буду сортировать массив, содержащий только эти 2 элемента, результат будет таким.
//sort in ascending order
["🥚", "🐥"].sort( (a, b) => {
return (a > b)
})
//Array [ "🐥", "🥚" ]
Что касается меня, я считаю, что курица появилась раньше яйца.
ЗАКЛЮЧЕНИЕ
Мы говорили о кодовой точке символов и о том, что каждый символ на вашей клавиатуре имеет кодовую точку в наборе символов вашего компьютера.
Мы также говорили о том, как работает метод sort(), и о логике, которую он использует, чтобы иметь возможность упорядочивать элементы массива в зависимости от нашей логики.
Я также показал вам некоторые ошибки, которых следует избегать при сортировке массива, и, наконец, рекомендуемый способ сортировки массива строк и массива чисел.
Надеюсь, вы поняли эту статью
ДОПОЛНИТЕЛЬНЫЙ
Я создал и запустил библиотеку проверки, которую вы можете использовать для проверки форм как на стороне клиента, так и на стороне сервера, используя правила проверки, сложные регулярные выражения и атрибуты ввода формы.
Он доступен для ReactJS, NodeJs, PHP и Native Js.
Вот ссылка на репозиторий библиотеки
Я открыт как для веб-разработки, так и для технических писателей.
Спасибо за чтение.
Изображение предоставлено: Мохаммад Рахмани на Unsplash
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
