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

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

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

На рисунке приведён числовой массив, состоящий из 5 элементов: 123, 7, 50, -9, 24.

Числовой массив в JavaScript

Кстати, массивы в JavaScript не являются каким-то определённым типом данных. Это просто объекты, а точнее их особый подвид.

let numbers = [3, -5, 9, 1, 21];
// выведем в консоль тип объекта
console.log(typeof numbers); // "object"

Создаются массивы функцией-конструктором Array. При этом прототипом для всех создаваемых массивов является объект Array.prototype.

Узнать является ли объект массивом можно следующим образом:

console.log(Object.prototype.toString.call(numbers) === '[object Array]'); // true

Таким образом, если результат этого сравнения равен true, то переменная (в данном случае numbers) содержит массив.

Кроме этого способа, узнать является ли значение переменной массивом можно с помощью специального метода Array.isArray():

console.log(Array.isArray(numbers)); // true

Если этот метод возвратит true - то значение является массивом. В противном случае - false.

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

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

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

let empty = []; // пустой массив
let numbers = [3, -5, 9, 1, 21]; // массив, состоящий из чисел

При создании массивов можно вставлять в конец необязательную завершающую запятую:

let coffee = [
  Lavazza,
  Nescafe,
  Jardin,
];

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

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

let arr = [6, true, 'Строка']; // массив, содержащий различные типы данных

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

// создадим массив, состоящий из 3 элементов
let 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"]

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

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

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

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

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

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

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

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

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

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

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

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

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

При этом как уже было отмечено выше массивы в JavaScript – это объекты. А это значит, что они ведут себя также как объекты.

Например, при копировании значения переменной, содержащей массив, мы на самом деле присваиваем ей не сам массив, а ссылку на него.

let names = ['Иван','Вася'];
// скопируем в newNames массив, находящийся в names (в результате эти две переменные будут содержать ссылку на один и тот же массив)
let newNames = names;
console.log( names === newNames ); // true
// добавим в массив новый элемент 'Петр'
newNames.push('Петр');
console.log( names ); // 'Иван','Вася','Петр' - в массиве names теперь уже три элемента

length - свойство для получения длины массива

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

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

Как получить первый элемент массива

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

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

Как получить последний элемент массива

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

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

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

Перебор элементов массива в JavaScript можно выполнить различными способами.

Наиболее традиционный способ – это использовать цикл for:

let students = ['Петя', 'Вася', 'Коля', 'Максим'];
// переберём массив через for
for (let i = 0, length = students.length; i < length; i++) {
  // выведем сам элемент
  console.log(students[i]);
  // выполним подробный вывод в консоль
  console.log(students[i] + ' имеет позицию ' + i + ' в [' + students +']');
}

Другой способ – через метод forEach:

students.forEach(function(item) {
  console.log(item);
});

// подробный вывод
students.forEach(function(item, index, array) {
  console.log(`${item} имеет позицию ${index} в [${array}]`);
});

В функции: item – это значение элемента, index – его индекс, array – сам массив, который мы перебираем.

Если при переборе массива вам его индекс не нужен, то в этом случае итерацию по элементам массива можно выполнить через цикл for..of:

for (let item of numbers) {
  console.log(item);
}

Для чего предназначен оператор delete

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

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

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

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

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

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

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

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

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

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

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

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

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

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

unshift - добавление элемента в начало массива

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

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

slice - копирование участка массива

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

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

  • 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого необходимо начать копировать элементы;
  • 2 параметр (необязательный) - предназначен для указания индекса элемента, до которого необходимо копировать (при этом он не включается в новый массив). Если его не указать, то будут скопированы элементы до конца указанного массива.
let namePlanets = ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"];
let 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 для удаления части элементов из массива.

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

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

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

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

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

join - преобразование массива в строку

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

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

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

Пример.

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

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

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

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

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

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

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

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

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

sort - cортировка элементов массива

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

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