Руководство по массивам в JavaScript

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

Предположим, вы хотите сохранить название цветов в своем коде JavaScript. Хранение имен цветов одно за другим в переменной может выглядеть примерно так:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

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

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

Самый простой способ создать массив в JavaScript — заключить список значений в квадратные скобки ([]), разделенный запятыми, как показано в следующем синтаксисе:

var myArray = [element0, element1, ..., elementN];

Массив также можно создать с помощью конструктора Array(), как показано в следующем синтаксисе. Однако для простоты рекомендуется использовать предыдущий синтаксис.

var myArray = new Array(element0, element1, ..., elementN);

Вот несколько примеров массивов, созданных с использованием литерального синтаксиса массива:

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

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

Получение элементов массива

К элементам массива можно обращаться по их индексу, используя обозначение в квадратных скобках. Индекс — это число, представляющее позицию элемента в массиве.

Индексы массива начинаются с нуля. Это означает, что первый элемент массива хранится с индексом 0, а не с 1, второй элемент хранится с индексом 1 и т. д. Индексы массива начинаются с 0 и доходят до количества элементов минус 1. Таким образом, массив из пяти элементов будет иметь индексы от 0 до 4.

В следующем примере показано, как получить отдельные элементы массива по их индексу.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Печатает: Apple
document.write(fruits[1]); // Печатает: Banana
document.write(fruits[2]); // Печатает: Mango
document.write(fruits[fruits.length - 1]); // Печатает: Papaya

В JavaScript массивы на самом деле являются просто особым типом объектов, которые имеют числовые индексы в качестве ключей. Оператор typeof вернет «объект» для массивов.

Получение длины массива

Свойство length возвращает длину массива, которая представляет собой общее количество элементов, содержащихся в массиве. Длина массива всегда больше, чем индекс любого его элемента.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Печатает: 5

Цикл элементов массива

Вы можете использовать цикл for для доступа к каждому элементу массива по порядку, например так:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Перебираем элементы массива
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Печатаем элемент массива
}

В ECMAScript 6 введен более простой способ перебора элементов массива, который является циклом for-of. В этом цикле вам не нужно инициализировать и отслеживать переменную цикла (i).

Вот тот же пример, переписанный с использованием цикла for-of:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Перебираем элементы массива
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Печатаем элемент массива
}

Вы также можете перебирать элементы массива, используя цикл for-in, например так:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Перебираем все элементы в массиве
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

Цикл for-in не должен использоваться для итерации по массиву, где важен порядок индекса. Цикл for-in оптимизирован для перебора свойств объекта, лучше использовать цикл for с числовым индексом или цикл for-of.

Добавление новых элементов в массив

Чтобы добавить новый элемент в конец массива, просто используйте метод push(), например:

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Печатает: Red,Green,Blue,Yellow
document.write(colors.length); // Печатает: 4

Аналогично, чтобы добавить новый элемент в начале массива, используйте метод unshift(), например:

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
 
document.write(colors); // Печатает: Yellow,Red,Green,Blue
document.write(colors.length); // Печатает: 4

Вы также можете добавить несколько элементов одновременно, используя методы push() и unshift(), например:

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
 
document.write(colors); // Печатает: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Печатает: 7

Удаление элементов из массива

Чтобы удалить последний элемент из массива, вы можете использовать метод pop(). Этот метод возвращает значение, которое было удалено. Вот пример:

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
 
document.write(last); // Печатает: Blue
document.write(colors.length); // Печатает: 2

Точно так же вы можете удалить первый элемент из массива, используя метод shift(). Этот метод также возвращает значение, которое было удалено. Вот пример:

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // Печатает: Red
document.write(colors.length); // Печатает: 2

Методы push() и pop() работают быстрее, чем unshift() и shift(). Поскольку методы push() и pop() просто добавляют и удаляют элементы в конце массива, поэтому элементы не перемещаются, тогда как unshift() и shift() добавляют и удаляют элементы в начале массива, которые требуют повторной индексации всего массива.

Добавление или удаление элементов с любым индексом

Метод splice() — это очень универсальный метод, который позволяет добавлять или удалять элементы с любым индексом, используя синтаксис arr.splice(startIndex, deleteCount, elem1, ..., elemN).

Этот метод принимает три параметра: первый параметр — это индекс, с которого начинается объединение массива; это необходимый аргумент; второй параметр — количество удаляемых элементов (используйте 0, если вы не хотите удалять какие-либо элементы), это необязательный аргумент; и третий параметр представляет собой набор заменяющих элементов, он также является необязательным. В следующем примере показано, как это работает:

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Удаляет первый элемент
 
document.write(colors); // Печатает: Green,Blue
document.write(removed); // Печатает: Red (one item array)
document.write(removed.length); // Печатает: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // Вставляет два элемента начиная с первого индекса
document.write(colors); // Печатает: Green,Pink,Yellow,Blue
document.write(removed); // Пустой массив
document.write(removed.length); // Печатает: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // Вставляет два значения, удаляет одно
document.write(colors); //Печатает: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Печатает: Pink (один элемент массива)
document.write(removed.length); // Печатает: 1

Метод splice() возвращает массив удаленных элементов или пустой массив, если элементы не были удалены, как вы можете видеть в приведенном выше примере. Если второй аргумент опущен, все элементы от начала до конца массива удаляются. В отличие от методов slice() и concat(), метод splice() модифицирует массив, для которого он вызывается.

Создание строки из массива

Могут быть ситуации, когда вы просто хотите создать строку, объединив элементы массива. Для этого вы можете использовать метод join(). Этот метод принимает необязательный параметр, который является строкой разделителя, которая добавляется между каждым элементом. Если вы опустите разделитель, то JavaScript будет использовать запятую (,) по умолчанию. В следующем примере показано, как это работает:

var colors = ["Red", "Green", "Blue"];
 
document.write(colors.join()); // Печатает: Red,Green,Blue
document.write(colors.join("")); // Печатает: RedGreenBlue
document.write(colors.join("-")); // Печатает: Red-Green-Blue
document.write(colors.join(", ")); // Печатает: Red, Green, Blue

Вы также можете преобразовать массив в строку через запятую, используя toString(). Этот метод не принимает параметр разделителя, такой как join(). Вот пример:

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Печатает: Red,Green,Blue

Извлечение части массива

Если вы хотите извлечь часть массива (то есть подмассив), но оставить исходный массив без изменений, вы можете использовать метод slice(). Этот метод принимает 2 параметра: начальный индекс (индекс, с которого начинается извлечение) и необязательный конечный индекс (индекс, перед которым нужно завершить извлечение), например arr.slice(startIndex, endIndex). Вот пример:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Печатает: Banana,Mango

Если параметр endIndex опущен, извлекаются все элементы до конца массива. Вы также можете указать отрицательные индексы или смещения — в этом случае метод slice() извлекает элементы из конца массива, а не из начала. Например:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.slice(2)); // Печатает: Mango,Orange,Papaya
document.write(fruits.slice(-2)); // Печатает: Orange,Papaya
document.write(fruits.slice(2, -1)); // Печатает: Mango,Orange

Объединение двух или более массивов

Метод concat() может использоваться для объединения двух и более массивов. Этот метод не изменяет существующие массивы, вместо этого он возвращает новый массив. Например:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// Создание нового массива путем объединения массивов
var animals = pets.concat(wilds); 
document.write(animals); // Печатает: Cat,Dog,Parrot,Tiger,Wolf,Zebra

Метод concat() может принимать любое количество аргументов массива, поэтому вы можете создать массив из любого количества других массивов, как показано в следующем примере:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
 
// Создание нового массива путем объединения массивов
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Печатает: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

Поиск по массиву

Если вы хотите найти в массиве определенное значение, вы можете просто использовать indexOf() и lastIndexOf(). Если значение найдено, оба метода возвращают индекс, представляющий элемент массива. Если значение не найдено, возвращается -1. Метод indexOf() возвращает первый найденный элемент, тогда как lastIndexOf() возвращает последний найденный.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.indexOf("Apple")); // Печатает: 0
document.write(fruits.indexOf("Banana")); // Печатает: 1
document.write(fruits.indexOf("Pineapple")); // Печатает: -1

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

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Поиск начиная с индекса
document.write(arr.indexOf(1, 2)); // Печатает: 3
 
// Поиск в обратном направлении, начиная с индекса
document.write(arr.lastIndexOf(1, 2)); // Печатает: 0

Вы также можете использовать метод includes(), чтобы узнать, содержит ли массив определенный элемент или нет. Этот метод принимает те же параметры, что и методы indexOf() и lastIndexOf(), но вместо номера индекса возвращает true или false. Например:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Печатает: true
document.write(arr.includes(6)); // Печатает: false
document.write(arr.includes(1, 2)); // Печатает: true
document.write(arr.includes(3, 4)); // Печатает: false

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

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Печатает: 5

Есть еще один метод, аналогичный find(), это метод findIndex(), который возвращает индекс найденного элемента в массиве вместо его значения. Например:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Печатает: 8

Метод find() ищет только первый элемент, который удовлетворяет условию. Однако, если вы хотите найти все совпадающие элементы, вы можете использовать метод filter().

Метод filter() создает новый массив со всеми элементами, которые успешно проходят по данному условию. Следующий пример покажет вам, как это работает:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Печатает: 5,7
document.write(result.length); // Печатает: 2