Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Многомерные массивы в javascript и несколько способов их сортировки

Приветствую всех, кто заинтересовался такой темой, как 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 ();

Вывод производится аналогичным образом.

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

Ну, вот я и рассказал о многомерных массивах и их сортировке. Если вам понравилась статья, то подписывайтесь на блог и читайте другие не менее интересные публикации. Буду благодарен за репосты. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 60 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: