базовый курс

ГРУППА КУРСА

Массивы в JavaScript

Что такое массив

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

Создание массива

В JavaScript создание массива делается так: пишется имя массива, ставится знак "=" а затем в квадратных скобках перечисляются элементы.

имя массива = [элемент0, элемент1, элемент2]

Создадим массив, с которым далее будем работать.

+
9
var mas = [5, 72, 30];

Созданный массив можно вывести на страницу:

10
document.write(mas);

Чтобы обратиться к элементу массива, нужно написать имя массива и в квадратных скобках указать номер элемента. Нумерация элементов начинается не с 1, а с 0. Почти всё, что может быть пронумеровано в JavaScript, начинается с нуля, а не с единицы. Этот принцип применяется в большинствеязыков программирования.

Номера элементов называются индексы.

Для примера выведем на страницу значение элемента 0, а элементу 1 присвоим новое значение и тоже выведем на страницу:

11
12
13
14
15
document.write('<br>');
document.write(mas[0]);
mas[1] = 80;
document.write('<br>');
document.write(mas[1]);

В нашем примере все элементы являются числами. Но массив может содержать данные любых типов. Элементом массива может быть другой массив. Один массив может иметь элементы разных типов. Пример:

16
var dif = [7, true, 'город'];

Существует ещё один способ создания массива в JavaScript. Он сложнее, поэтому используется редко. При этом используется ключевое слово new и указывается, что создаётся массив.

new Array (элемент0, элемент1, элемент2)

Для примера создадим ещё один массив:

17
var nmas = new Array (2, 15);

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

Добавить элемент просто: нужно указать элемент, который ещё не создан. У массива mas индекс последнего элемента: 2. Чтобы добавить ещё один элемент, можно указать элемент с индексом 3 и присвоить ему значение:

18
mas[3] = 21;

Индексы не обязательно идут по порядку. Можно создать элемент с любым индексом, например 1000.

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

массив.push (значение элемента)

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

19
20
var sport = ['Футбол'];
sport.push('Хоккей', 'Баскетбол');

Метод unshift тоже добавляет элементы, но в начало массива.

массив.unshift (значение элемента)

Добавим ещё виды спорта и выведем полученный массив на страницу:

21
22
sport.unshift('Бег', 'Теннис');
document.write('<br>'+sport);

Чтобы удалить элемент, используется метод pop, который удаляет элемент, находящийся в конце массива.

массив.pop ()

Удалим один вид спорта из массива:

24
sport.pop();

Метод shift удаляет элемент, находящийся в начале массива.

массив.shift ()

Удалим первый элемент из массива:

25
sport.shift();

Длина массива

Свойство length содержит длинну массива. Для примера выведем длинну массива mas, который мы создали ранее:

27
28
document.write('<br>');
document.write('длина '+mas.length);

В JavaScript длина массива меет одну особенность: это не количество элементов, а индекс последнего элемента + 1. Это важно, потому, что каких-то элементов в массиве может не быть. Поэтому длину массива неудобно использовать для перебора. Но далее вы узнаете, что можно обойтись без неё. А длину можно использовать для работы с посленим элементом или добавления новых.

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

Часто бывает нужно произвести какие-то действия с каждым элементом массива. Это делается в цикле, который называют перебор массива. Для примера веведем по отдельности каждый элемент массива mas:

30
31
32
33
for (var i=0; i<mas.length; i++)
  {
  document.write('<br>' + i + ' - ' + mas[i]);
  }

Если какие-то элементы отсутсвуют, то их значение равно undefined. Это нужно учитывать в цикле. Когда отсутствующих элементов много, такой массив называется разряженным. Для него рассмотренный способ перебора не подходит, потому что производится много бесполезных итераций. Тогда для перебора массива можно использовать конструкцию for in. Она выглядит так:

35
36
37
38
for (var key in mas)
  {
  document.write('<br>' + key + ' - ' + mas[key]);
  }

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

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

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

Преобразование в строку

Метод join() преобразует массив в строку.

массив.join (разделитель)

Параметры:

разделитель - подстрока, которая добавляется в строку между элементами массива

Метот возвращает строку, а исходный массив не меняет. Пример:

32
var strSport = sport.join(', ');

Метод split() выполняет обратную задачу. Он преобразует строку в массив.

строка.split (разделитель, длина массива)

Параметры:

разделитель - подстрока, по которой происходит разбиение строки

длинна массива - максимальное количество элементов массива. Если в строке остались ещё данные то они не добавляются. НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР

Пример:

34
var newMas = strSport.split(', ');