Приветствую всех, кто заинтересовался такой темой, как JavaScript многомерные массивы и сортировка. В текущей публикации я постараюсь во всех подробностях раскрыть данную тему.
Поэтому после прочтения статьи вы узнаете, зачем в веб-приложениях используются многомерные массивы, как они создаются и каким образом ими можно управлять и сортировать. Давайте приступим к обучению!
Как создаются многомерные массивы и для чего они нужны?
Для начала стоит вспомнить, как создается обычный одномерный массив.
var array = [element0, element1, element2, …, elementN]
А теперь запомните, что многомерный массив – это массив массивов. Соглашусь, звучит, как тавтология. Однако прочитайте определение еще раз. Действительно, многомерный массив состоит из определенного количества вложенных в него массивов.
Рассмотрим следующую ситуацию. В начале некой игры пользователь вводит свое имя, а после окончания ему на экран выводится рейтинговая таблица с именами игроков и их рекордами.
Понятное дело, что такая информация хранится в базе данных. Но когда мы ее вытягиваем из БД, то получаем многомерный массив. Ведь в каждом подмассиве хранится логин игрока и количество набранных очков.
Выглядеть все это будет следующим образом:
1 2 3 4 5 | var results = [ ['Маркус', 333], ['Наташа', 211], ['Алексей', 124] ]; |
Как видите, информация может храниться разнородная. Это могут быть и строки, и числа, и даже объекты. Такое возможно потому, что массивы в JavaScript являются нетипизированными.
При этом обращение к элементам происходит через двойной оператор [].
Для закрепления материала проанализируйте небольшую программку.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <p>Значение results[1][0] = <span id="demo"></span></p> <!--После равно отобразится «Маркус»--> <script> var results = [ ['Маркус', 333], ['Наташа', 211], ['Алексей', 124] ]; document.getElementById("demo").innerHTML = results[1][0]; </script> </body> </html> |
Массивы являются достаточно удобным средством для хранения упорядоченных комплексных данных при их обработке. К тому же работать с ними очень удобно и при этом скорость их обработки достаточно высокая.
Способы сортировки данных
Для массивов в JavaScript-е предусмотрен встроенный метод под названием sort (). Данный инструмент очень гибок. И сейчас объясню почему.
Если вы используете метод без параметров, то он автоматически упорядочивает подмассивы по первому элементу в алфавитном порядке. Так, при вызове results.sort () разбираемый объект будет выглядеть вот так:
Алексей,124
Маркус,333
Наташа,211
А если поменять в каждом вложенном массиве элементы местами, то получится:
124,Алексей
211,Наташа
333,Маркус
При этом для сравнения все элементы временно преобразовываются к строкам.
Если же для решения какой-то конкретной задачи вам необходима функция, сортирующая элементы нестандартным способом, то вы можете написать ее самостоятельно и передать в качестве параметра в sort (). При этом стоит учесть, что пользовательская функция должна возвращать:
- положительное число (в основном выбирают 1), если первый указанный элемент следует за вторым при сравнении;
- отрицательное число (обычно -1), если второй выбранный элемент должен следовать за первым;
- нуль, если два проверяемых значения равны.
В качестве примера давайте первоначальный массив results отсортируем по очкам. При чем результаты будут упорядочены от большего к меньшему. Это можно реализовать двумя способами.
В первом варианте я изменил логику сортировки, т.е. в ситуации, когда надо возвращать положительное число, возвращаю отрицательное и наоборот.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <body> <p>Рекордная таблица:<br/> <span id="demo"></span></p> <script> var results = [ ['Маркус', 333], ['Наташа', 211], ['Алексей', 124] ]; results.sort(RecordSort); function RecordSort(a, b) { if (a[1] > b[1]) return -1; else if (a[1] < b[1]) return 1; else return 0; } for(var i=0; i<results.length; i++) document.getElementById("demo").innerHTML += results[i]+'<br/>'; </script> </body> </html> |
А вот во втором способе оставил логику сортировки нетронутой, но использовал дополнительно другой метод – reverse (). Как видно из названия, reverse изменяет порядок следования элементов на противоположный.
Поэтому функция sort () будет выглядеть следующим образом:
1 2 3 4 5 | function RecordSort(a, b) { if (a[1] > b[1]) return 1; else if (a[1] < b[1]) return -1; else return 0; } |
А вот после нее добавим указанный выше метод.
results.reverse ();
Вывод производится аналогичным образом.
Хочу обратить ваше внимание на один важный момент. При использовании данных функций все изменения происходят с массивом, к которому вы их применяете. Таким образом, если вам необходимо сохранить первоначальный вид данных, то создавайте копию, а после редактируйте уже ее.
Ну, вот я и рассказал о многомерных массивах и их сортировке. Если вам понравилась статья, то подписывайтесь на блог и читайте другие не менее интересные публикации. Буду благодарен за репосты. До новых встреч!
Пока-пока!
С уважением, Роман Чуешов