Поиск по сайту:

Понимание массивов в JavaScript

Введение

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

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

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

// 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",
];

Вместо создания пяти отдельных переменных теперь у нас есть одна переменная, содержащая все пять элементов. Мы использовали квадратные скобки — [] — для создания массива.

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

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

Output
Pacific

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

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

Есть два способа создать массив в JavaScript:

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

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

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

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

// 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;

Output
[ 'Hammerhead', 'Great White', 'Tiger' ]

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

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

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

Примечание. Вы можете увидеть последний элемент в массиве с завершающей запятой или без нее. Это известно как файлы JSON.

Индексирование массивов

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

Массивы не имеют пар имя/значение. Вместо этого они индексируются целочисленными значениями, начинающимися с 0. Вот пример массива, назначенного seaCreatures.

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

Вот разбивка того, как индексируется каждый элемент в массиве seaCreatures.

octopus squid shark seahorse starfish
0 1 2 3 4

Первым элементом массива является octopus, который имеет индекс 0. Последний элемент — морская звезда, индекс которого равен 4. Счет начинается с 0 в индексах, что противоречит нашей естественной интуиции начинать счет с 1, поэтому необходимо соблюдать особую осторожность, чтобы помнить об этом, пока это не станет естественным.

Узнать, сколько элементов в массиве, можно с помощью свойства length.

seaCreatures.length;

Output
5

Хотя индексы seaCreatures состоят из значений от 0 до 4, свойство length выводит фактическое количество элементов в массив, начиная с 1.

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

seaCreatures.indexOf("seahorse");

Output
3

Если номер индекса не найден, например, для несуществующего значения, консоль вернет -1.

seaCreatures.indexOf("cuttlefish");

Output
-1

С номерами индексов, которые соответствуют элементам в массиве, мы можем получить доступ к каждому элементу дискретно, чтобы работать с этими элементами.

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

Доступ к элементу в массиве JavaScript осуществляется путем обращения к порядковому номеру элемента в квадратных скобках.

seaCreatures[1];

Output
squid

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

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Output
starfish

Попытка доступа к несуществующему элементу вернет undefined.

seaCreatures[10];

Output
undefined

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

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

nestedArray[1][0];

Output
coral

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

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

В нашей переменной seaCreatures у нас было пять элементов, состоящих из индексов от 0 до 4. Если мы хотим добавить новый элемент в массив, мы можем присвоить значение следующему индексу.

seaCreatures[5] = "whale";

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale' ]

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

seaCreatures[7] = "pufferfish";

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish' ]

Попытка доступа к дополнительному элементу массива вернет undefined.

seaCreatures[6]

Output
undefined

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

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]

С другой стороны, метод unshift() добавит элемент в начало массива.

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish',
	'lobster' ]

Между push() и unshift() вы сможете добавлять элементы в начало и конец массива.

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

Когда мы хотим удалить определенный элемент из массива, мы используем метод splice(). В массиве seaCreatures мы случайно создали неопределенный элемент массива ранее, поэтому давайте удалим его сейчас.

seaCreatures.splice(7, 1);

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]

В методе splice() первый параметр обозначает номер удаляемого индекса (в данном случае 7), а второй параметр — количество элементов, которые должны быть удалены. удаленный. Ставим 1, что означает, что будет удален только один элемент.

Метод splice() изменит исходную переменную. Если вы хотите, чтобы исходная переменная осталась неизменной, используйте slice() и присвойте результат новой переменной. Здесь мы назначим две переменные, одну из которых использует slice() для хранения массива seaCreatures от первого элемента до whale, а вторую переменную для хранения элементов pufferfish и лобстер. Чтобы соединить два массива, мы будем использовать метод concat() для возврата нового массива.

let firstArray = seaCreatures.slice(0, 7);
let secondArray = seaCreatures.slice(8, 10); 

firstArray.concat(secondArray);

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]

Обратите внимание, что при вызове переменной seaCreatures элементы в массиве остаются неизменными.

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish',
	'lobster' ]

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

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

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

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

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

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

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

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

Output
[ 'manatee',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

Другой способ изменить значение — использовать метод splice() с новым параметром. Если бы мы хотели изменить значение элемента морской конек, который является элементом с индексом 3, мы могли бы удалить его и добавить на его место новый элемент.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

Output
[ 'manatee',
	'squid',
	'shark',
	'sea lion',
	'starfish',
	'whale',
	'pufferfish' ]

В приведенном выше примере мы удалили морской конек из массива и вставили новое значение в индекс 3.

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

Мы можем перебрать весь массив с помощью ключевого слова 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]);
}

Output
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);
}

Output
dolphin
whale
manatee

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

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

Заключение

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

Вы можете узнать больше о других типах данных в JavaScript, прочитав наш учебник «Понимание типов данных в JavaScript».