Массив в 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