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

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

Массив – это упорядоченная коллекция значений. Значения в этой коллекции называются элементами. Каждый элемент в массиве имеет свой порядковый номер (число), который называется индексом. Индексы нумеруются с 0.

На следующем рисунке приведён числовой массив, состоящий из 5 элементов. Элементы данного массива содержат следующие данные: 123 (индекс 0), 7 (индекс 1), 50 (индекс 2), -9 (индекс 3), 24 (индекс 4).

JavaScript - вывод значений элементов массива

Создание (объявление) массива

Создание массивов в JavaScript обычно осуществляется с помощью литерала массива.

Литерал массива представляет собой квадратные скобки, внутрь которых помещается список элементов, разделённых между собой с помощью запятой.

Например:

var empty = []; // пустой массив
var numbers = [3, -5, 9, 1, 21]; // числовой массив
var arr = [6, true, 'Строка']; // массив, содержащий различные типы данных

Значения в массиве JavaScript не обязательно должны иметь одинаковый тип. Т.е. в одном массиве могут находиться значения различных типов данных.

Обращение к определённому элементу массива выполняется по его индексу. Данная операция ещё называется операцией индексации.

Например:

// создадим массив, состоящий из 3 элементов
var smartphoneColors = ["Black", "White", "Grey"];
// выведем в консоль браузера значения элементов массива smartphoneColors с индексами 0 и 2 
console.log("Значение элемента массива smartphoneColors с индексом 0: " + smartphoneColors[0]); // "Значение элемента массива smartphoneColors с индексом 0: Black"
console.log("Значение элемента массива smartphoneColors с индексом 2: " + smartphoneColors[2]); // "Значение элемента массива smartphoneColors с индексом 0: Grey"
// изменим значение элемента массива smartphoneColors с индексом 1 на "Red"
smartphoneColors[1] = "Red"; // ["Black", "Red", "Grey"]
// установим элементу массива smartphoneColors с индексом 3 значение "Blue"
smartphoneColors[3] = "Blue"; // ["Black", "Red", "Grey", "Blue"]

В качестве значений элементов массива можно использовать не только статические значения, но и выражения:

var lengthA = 7, widthA = 5; 
var point = [lengthA *2, widthA + 4, -2];

В качестве значений элементов массива могут использоваться объекты.

var points = [
  {x1: 5, y1: 3},
  {x1: 7, y1: 10},
  {x1: 12; y1: 0}
]; // массив, состоящий из 3 объектов

Другой способ создания массива состоит в вызове функции-конструктора Array.

Вызов функции-конструктора без аргументов используется для создания пустого массива.

var empty = new Array(); // пустой массив

Данный способ создания массива, эквивалентен литералу [].

Если функции-конструктору в качестве аргумента указать число, то она создаст массив, который будет состоять из указанного числа элементов. Причем все эти элементы будут иметь в качестве значения undefined.

var arr = new Array(5); // массив, состоящий из 5 элементов (значения элементов равны undefined)

Если функции-конструктору в скобках передать несколько значений или одно не числовое значение, то она создаст массив из переданных ей аргументов.

Как создать массив в JavaScript

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

Свойство length (длина массива)

Определение длины массива (количества элементов) осуществляется с помощью свойства length.

//создадим массив путём перечисления значений элементов в функции Array
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//переменной lengthArray присвоим длину массива volumeHDDs
var lengthArray = volumeHDDs.length;

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

//создание массива, состоящего из 3 элементов
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//получение значения первого элемента массива
var firstValue = volumeHDDs[0];

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

//создание массива, состоящего из 3 элементов
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//получение значения последнего элемента массива
var lastValue = volumeHDDs[volumeHDDs.length-1];

Перебор элементов массива осуществляется с помощью цикла for.

Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):

//создание массива nameStudents, состоящего из 4 элементов
var nameStudents = new Array("Петя","Вася","Коля","Максим");
//перебор элементов массива от 0 до длины массива-1
for (var i=0; i <= nameStudents.length-1; i++)
{
  console.log(i+1 + " элемент массива = " + nameStudents[i]);
}

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

Оператор delete используется не для удаления элемента из массива, а для присваиванию данному элементу массива значение undefined.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
delete namePlanets[1];
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Оператор delete

Функции для работы с массивами (методы объекта Array)

Объект Array содержит следующие методы (функции) для работы с массивами:

  • push
  • pop
  • shift
  • unshift
  • slice
  • splice
  • join
  • split
  • reverse
  • sort

Метод push (добавление элемента в конец массива)

Метод push предназначен для добавления элемента в конец массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата метод push возвращает количество элементов в массиве с учётом добавленного.

var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.push("Юпитер"); // 5
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]

Метод pop (удаление последнего элемента из массива)

Метод pop предназначен для удаления последнего элемента из массива. У данного метода нет параметров. В качестве результата он возвращает значение последнего (удалённого) элемента массива.

var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.pop(); // "Марс"
console.log(namePlanets); // ["Венера", "Меркурий", "Земля"]

Метод shift (удаление первого элемента из массива)

Метод shift предназначен для удаления первого элемента из массива, т.е. элемента, имеющего индекс 0. Все остальные элементы массива смещаются к началу, т.е. у каждого из них индекс уменьшается на 1. Данный метод в качестве результата возвращает значение удалённого элемента.

var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.shift(); // "Венера"
console.log(namePlanets); // ["Меркурий", "Земля", "Марс"]

Метод unshift (добавление элемента в начало массива)

Метод unshift предназначен для добавления элемента в начало массива (перед другими элементами). Значение этого элемента указывается в качестве параметра данного метода. В качестве результата данный метод возвращает количество элементов в массиве с учётом добавленного.

var namePlanets = ["Меркурий", "Земля", "Марс", "Юпитер"];
namePlanets.unshift("Венера"); // 5
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]

Метод slice (копирование участка массива)

Метод slice предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов.

Метод slice имеет 2 параметра:

  • 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого необходимо начать копировать элементы;
  • 2 параметр (необязательный) - предназначен для указания индекса элемента, до которого необходимо копировать (при этом он не включается в новый массив). Если его не указать, то будут скопированы элементы до конца указанного массива.
var namePlanets = ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"];
var newNamePlanets = namePlanets.slice(2, 4); // ["Земля", "Марс"]

Метод splice (изменение содержимого массива)

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

Синтаксис метода splice:

array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]);
/*
  startIndex (обязательный) - стартовый индекс элемента, с которого нужно начать изменение массива.
      Если в качестве startIndex указать число, большее длины массива, то стартовый индекс будет установлен на конец массива.
      Если в качестве startIndex указать отрицательное число, то отсчет стартового элемента будет вестись с конца.
  deleteCount (обязательный) - число, показывающее какое количество элементов необходимо удалить из массива.
      Если элементы не нужно удалять из массива, то deleteCount необходимо установить 0. После этого нужно указать как минимум один новый элемент, который нужно добавить в массив.
      Если в качестве deleteCount указать число, которое будет превышать количество оставшихся элементов в массиве, начиная с startIndex, то в этом случае они всё равно будут удалены (т.е. все элементы до конца массива, начиная со стартового индекса)
  element1, element2, ... (необязательные) - элементы которые нужно добавить в массив.
*/

Примеры использования метода splice.

Применения метода splice для удаления части элементов из массива.

var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.splice(2, 2); //["Земля", "Марс"]
console.log(namePlanets); // ["Венера", "Меркурий"]

Применение метода splice для удаления элемента из массива и добавления в него новых.

var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.splice(1, 1, "Уран", "Нептун", "Сатурн"); // ["Меркурий"]
console.log(namePlanets); // ["Венера", "Уран", "Нептун", "Сатурн", "Земля", "Марс"]

Применение метода splice только для добавления новых элементов в массив.

var namePlanets = ["Юпитер", "Сатурн", "Уран"];
namePlanets.splice(0, 0, "Венера", "Меркурий", "Земля", "Марс"); // []
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер", "Сатурн", "Уран"]

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

Метод join предназначен для соединения всех элементов массива в строку.

Синтаксис метода join:

array.join([separator]);
/*
  separator (необязательный) - разделитель, который используется в качестве соединительной строки между каждым элементом массива.
      Если данный параметр не указать, то в качестве соединительной строки будет использоваться ",".
      Если в качестве параметра указать пустую строку, то элементы массивы в возвращаемой строке между собой ничем разделены не будут
*/

Пример.

var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"];
var berriesStr1 = berries.join(); // "Виноград,Виноград,Смородина,Шиповник"
var berriesStr2 = berries.join(""); // "ВиноградВиноградСмородинаШиповник"
var berriesStr3 = berries.join(", "); // "Виноград, Виноград, Смородина, Шиповник"
var berriesStr4 = berries.join(" + "); // "Виноград + Виноград + Смородина + Шиповник"

Если в качестве separator использовать не строку, то он будет преобразован к строке.

var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"];
var berriesStr1 = berries.join(false); // "ВиноградfalseВиноградfalseСмородинаfalseШиповник"
var berriesStr2 = berries.join(4/2); // "Виноград2Виноград2Смородина2Шиповник"
Элементы массива, которые имеют в качестве значения null или undefined, будут приведены к пустой строке.
var arr = [0, undefined, 5, null, -4];
var arrStr = arr.join(", "); // "0, , 5, , -4"

Преобразование строки в массив - split

Метод split предназначен для преобразования строки в массив. Данный метод имеет один параметр, в качестве которого вы можете указать строку, на основании которой данная строчка будет разбита на массив строк.

var strElementComputers = "Системный блок, Монитор, Клавиатура, Мышь, Колонки, Принтер";
var elementComputers = strElementComputers.split(", ");
console.log("Количество элементов в массиве: " + elementComputers.length);
for (var i=0; i <= elementComputers.length-1; i++)
{
  console.log(i + " элемент массива = " + elementComputers[i]);
}

JavaScript - Метод split

Метод reverse предназначен для переупорядочивания элементов массива в обратном порядке.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.reverse();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод reverse

Метод sort предназначен для сортировки элементов массива. По умолчанию данный метод сортирует массив как строки.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.sort();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод sort