Массивы в JavaScript

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

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

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

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

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

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

let mas = [5, 72, 30];
document.write(mas);

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

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

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

document.write('<br>');
document.write(mas[0]);
mas[1] = 80;
document.write('<br>');
document.write(mas[1]);

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

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

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

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

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

var nmas = new Array (2, 15);

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

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

mas[3] = 21;

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

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

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

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

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

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

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

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

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

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

массив.pop ()

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

sport.pop();

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

массив.shift ()

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

sport.shift();

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

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

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

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

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

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

for (let i=0; i<mas.length; i++)
  {
  document.write('<br>' + i + ' - ' + mas[i]);
  }

Есть более простая конструкция for of. Она специально предназначена для перебора массивов.

for (let value of mas)
  {
  document.write('<br>' + value);
  }

На каждой итерации в переменную value записывается значение очередного элемента. Эту переменную можно назвать как угодно. Обычно её называют так же, как массив, только в единственном числе. Если массив называется users users, то переменную можно назвать users.

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

for (let key in mas)
  {
  document.write('<br>' + key + ' - ' + mas[key]);
  }

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

В таком массиве происходит столько итераций, сколько элментов имеет массив.

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

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

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

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

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

let strSport = sport.join(', ');

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

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

Пример:

let newMas = strSport.split(', ');