Работа с массивами в JavaScript

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

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

Чтобы понять, в чем преимущества массивов, попробуйте присвоить названия океанов отдельным переменным. Откройте файл oceans.js и добавьте:

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

Такой код быстро станет очень большим, его будет неудобно читать и поддерживать.

Массив решает эту проблему так:

// Assign the five oceans
let oceans = [
"Pacific",
"Atlantic",
"Indian",
"Arctic",
"Antarctic",
];

Вместо того чтобы создавать 5 переменных, вы можете поместить все компоненты в одну переменную. Массивы хранятся в квадратных скобках [].

Чтобы получить доступ к какому-либо компоненту, укажите его индекс:

// Print out the first item of the oceans array
oceans[0];
Pacific

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

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

Создать массив в JavaScript можно двумя способами:

  • Через литерал массива, который использует квадратные скобки.
  • Через конструктор массива, в котором используется новое ключевое слово.

Попробуйте создать массив с видами акул через литерал массива, который инициализируется с помощью []. Создайте файл sharks.js и добавьте в него:

// Initialize array of shark species with array literal
let sharks = [
"Hammerhead",
"Great White",
"Tiger",
];

Такой же массив можно создать с помощью конструктора массивов:

// Initialize array of shark species with array constructor
let sharks = new Array(
"Hammerhead",
"Great White",
"Tiger",
);

Оба метода создадут массив. Однако литерал массива (квадратные скобки) является гораздо более распространенным и предпочтительным методом, так как конструктор new Array() может стать причиной несогласованности, и программа будет выдавать неожиданные результаты.

Вывести весь массив можно так:

// Print out the entire sharks array
sharks;
[ 'Hammerhead', 'Great White', 'Tiger' ]

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

// Initialize array of mixed datatypes
let mixedData = [
"String",
null,
7,
[
"another",
"array",
],
];

Теперь нужно разобраться, как массивы индексируются.

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

Читайте также: Основы работы с JSON

Индексация массивов

Если вы знакомы с индексацией строк в JavaScript, вы знаете общий подход к индексации массивов.

Читайте также: Работа со строками в JavaScript

В массивах нет пар «ключ/ значение». Они индексируются целыми числами, начиная с 0. Вот пример массива SeaCreatures (файл seacreatures.js):

let seaCreatures = [
"octopus",
"squid",
"shark",
"seahorse",
"starfish",
];

Вот как индексируются его элементы:

octopus squid shark seahorse starfish
0 1 2 3 4

 

Первый элемент, octopus, имеет индекс 0. Последний элемент, starfish, имеет индекс 4. Индексация начинается с 0, а не с 1, как мы привыкли считать в жизни.

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

seaCreatures.length;
5

Как видите, массив индексируется числами 0-4, а свойство length выводит фактическое количество элементов в массиве, начиная счет с 1.

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

seaCreatures.indexOf("seahorse");
3

Если индекс не найден, то есть значение не существует в массиве, консоль выведет значение -1.

seaCreatures.indexOf("cuttlefish");
-1

Индексы соответствуют элементам в массиве и позволяют получить доступ к каждому элементу отдельно.

Доступ к элементам массива

Доступ к элементу в массиве JavaScript можно получить, обратившись к номеру индекса элемента в квадратных скобках.

seaCreatures[1];
squid

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

const lastIndex = seaCreatures.length - 1;
seaCreatures[lastIndex];
starfish

Если запрашиваемый элемент не существует, вы получите значение undefined.

seaCreatures[10];
undefined

Чтобы получить доступ к элементам во вложенном массиве, нужно также указать номер индекса, соответствующий элементу во вложенном массиве:

let nestedArray = [
[
"salmon",
"halibut",
],
[
"coral",
"reef",
]
];
nestedArray[1][0];
coral

В приведенном выше примере мы обратились к массиву в позиции 1 переменной nestedArray, а затем к элементу в позиции 0 во вложенном массиве.

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

Переменная seaCreatures содержит 5 элементов, которые индексируются числами от 0 до 4.

Чтобы добавить новый элемент в массив, присвойте ему значение следующего индекса:

seaCreatures[5] = "whale";
seaCreatures;
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale' ]

Если при добавлении элемента вы случайно пропустите индекс, это создаст неопределенный элемент в массиве.

seaCreatures[7] = "pufferfish";
seaCreatures;
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
,
'pufferfish' ]

Получить доступ к неопределенному элементу массива не получится:

seaCreatures[6]
undefined

Таких ошибок можно избежать с помощью метода push(), который добавляет элемент в конец массива:

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");
seaCreatures;
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
,
'whale',
'pufferfish',
'lobster' ]

Есть также метод unshift(), который добавляет элемент в начало массива:

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");
seaCreatures;
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
,
'pufferfish',
'lobster' ]

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

Чтобы удалить определенный элемент из массива, нужно использовать метод splice(). Попробуйте удалить случайно добавленный неопределенный элемент из массива seaCreatures.

seaCreatures.splice(7, 1);
seaCreatures;
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish',
'lobster' ]

Метод splice() принимает два параметра. Первый параметр – индекс элемента, который нужно удалить (в данном случае это 7), а второй – количество удаляемых элементов (1).

Метод splice() изменит исходную переменную. Если вы хотите, чтобы исходная переменная оставалась неизменной, используйте slice() и присвойте результат новой переменной.

let newArray = slice(7, 1);

Метод pop() удаляет последний элемент массива:

// Remove the last item from the seaCreatures array
seaCreatures.pop();
seaCreatures;
[ 'dragonfish',
'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]

Первый элемент массива можно удалить с помощью метода shift():

// Remove the first item from the seaCreatures array
seaCreatures.shift();
seaCreatures;
[ 'octopus',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]

Методы pop() и shift() позволяют удалять элементы с начала и конца массивов. Рекомендуется по возможности использовать метод pop(), так как он сохраняет исходные номера индексов остальных элементов массива.

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

Перезаписать любое значение в массиве и назначить новое значение можно с помощью оператора присваивания (как в переменных).

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";
seaCreatures;
[ 'manatee',
'squid',
'shark',
'seahorse',
'starfish',
'whale',
'pufferfish' ]

Также для этого можно использовать метод splice() с новым параметром. К примеру, чтобы изменить элемент seahorse (индекс 3), можно удалить его и добавить новый элемент на его место.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");
seaCreatures();
[ 'manatee',
'squid',
'shark',
'sea lion',
'starfish',
'whale',
'pufferfish' ]

Итерация массива

Итерация массива выполняется с помощью ключевого слова for и свойства length.

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

// Create an array of shellfish species
let shellfish = [
"oyster",
"shrimp",
"clam",
"mussel",
];
// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
console.log(i, shellfish[i]);
}
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

Также можно использовать для этого цикл for…of, новую функцию JavaScript.

// Create an array of aquatic mammals
let mammals = [
"dolphin",
"whale",
"manatee",
];
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal);
}
dolphin
whale
manatee

Цикл for…of не возвращает индексы элементов в массиве. Но, как правило, он является более простым и быстрым способом итерации массива.

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

Заключение

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

Читайте также: Типы данных в JavaScript

Tags: