Используя индекс в квадратных скобках, можно задавать или изме-
нять значения элементов и даже добавлять новые элементы. Например,
чтобы заменить содержимое первого элемента массива dinosaurs
("Тираннозавр") на "Тираннозавр рекс", можно написать:
dinosaurs[0] = "Тираннозавр рекс";
После этого массив dinosaurs станет таким:
["Тираннозавр рекс", "Велоцираптор", "Стегозавр", "Трицератопс",
"Брахиозавр", "Птеранодон", "Апатозавр", "Диплодок",
"Компсогнат”]
С помощью индексов также можно добавлять в массив элементы.
Например, вот как создать массив dinosaurs, задавая каждый элемент
через квадратные скобки:
var dinosaurs = [];
dinosaurs[0] = "Тираннозавр";
dinosaurs[1] = "Велоцираптор";
dinosaurs[2] = "Стегозавр";
dinosaurs[3] = "Трицератопс";
dinosaurs[4] = "Брахиозавр";
dinosaurs[5] = "Птеранодон";
dinosaurs[6] = "Апатозавр";
dinosaurs[7] = "Диплодок";
dinosaurs[8] = "Компсогнат";
dinosaurs;
["Тираннозавр", "Велоцираптор", "Стегозавр", "Трицератопс",
"Брахиозавр", "Птеранодон", "Апатозавр", "Диплодок",
"Компсогнат”]
Сначала создаем пустой массив: var dinosaurs = []. Затем
в каждой из следующих строк добавляем по одному элементу коман-
дами dinosaurs[] с индексом от 0 до 8. Закончив наполнение мас-
сива, можно посмотреть его содержимое (набрав dinosaurs;) и убе-
диться, что JavaScript расположил значения по порядку, в соответствии
с индексами.
3. Массивы 53
На самом деле в массив можно добавить элемент с любым индексом.
Например, чтобы добавить нового (выдуманного) динозавра с индексом 33,
введем:
dinosaurs[33] = "Филосораптор";
dinosaurs;
["Тираннозавр", "Велоцираптор", "Стегозавр", "Трицератопс",
"Брахиозавр", "Птеранодон", "Апатозавр", "Диплодок",
"Компсогнат", undefined × 24 "Филосораптор"]
Элементы между индексами 8 и 33 получат значение undefi ned. При
печати массива Chrome сообщает количество этих undefi ned-элементов,
а не выводит каждый из них по отдельности.
Разные типы данных в одном массиве
Не обязательно, чтобы все элементы массива были одного типа. Например,
вот массив, в котором хранится число (3), строка ("динозавры"), массив
(["трицератопс", "стегозавр", 3627.5]) и еще одно число (10):
var dinosaursAndNumbers = [3, "динозавры", ["трицератопс",
Dinosaurs
"стегозавр", 3627.5], 10];
and numbers —
динозавры
и числа
Чтобы обратиться к элементам массива, вложенного в другой мас-
сив, нужно использовать вторую пару квадратных скобок. Например,
если команда dinosaursAndNumbers[2]; вернет весь вложенный мас-
сив, то dinosaursAndNumbers[2][0]; — лишь первый элемент этого
вложенного массива ("трицератопс").
dinosaursAndNumbers[2];
["трицератопс", "стегозавр", 3627.5]
dinosaursAndNumbers[2][0];
"трицератопс"
индекс
индекс
индекс
индекс
[0]
[1]
[2]
[3]
[3, "динозавры", ["трицератопс", "стегозавр", 3627.5], 10];
индекс
индекс
индекс
[2][0]
[2][1]
[2][2]
Рис. 3.1. Индексы основного массива показаны красным цветом, а индексы вложенного
массива — синим
54 Часть I. Основы
Вводя dinosaursAndNumbers[2][0];, мы просим JavaScript обра-
титься к индексу 2 массива dinosaursAndNumbers, где находится
массив ["трицератопс", "стегозавр", 3627.5], и вернуть значе-
ние с индексом 0 из этого вложенного массива — это первый элемент,
"трицератопс". На рис. 3.1 показаны индексы для этих массивов.
Работаем с массивами
Работать с массивами вам помогут свойства и методы. Свойства хранят
различные сведения о массиве, а методы обычно либо изменяют его,
либо возвращают новый массив. Давайте разберемся.
Длина массива
Порой нужно знать, сколько в массиве элементов. Например, если снова
и снова добавлять динозавров в массив dinosaurs, вы можете забыть,
сколько их теперь всего.
Для этого есть свойство length (длина), хранящее количество эле-
ментов в массиве. Чтобы узнать длину массива, просто добавьте .length
после его имени. Давайте посмотрим, как это работает. Но сначала соз-
дадим новый массив с тремя элементами:
var maniacs = ["Якко", "Вакко", "Дот"];
Якко, Вакко
maniacs[0];
и Дот — герои
"Якко"
мультсериала
maniacs[1];
«Озорные ани-
"Вакко"
машки» (англ.
maniacs[2];
Animaniacs)
"Дот"
о семейке
Уорнер, соз-
данного ком-
Чтобы узнать длину этого массива, добавим .length к maniacs:
панией Warner
Bros.
maniacs.length;
3
JavaScript сообщает, что в массиве 3 элемента, и мы знаем, что их
индексы — 0, 1 и 2. Отсюда следует полезное наблюдение: последний
индекс массива всегда на единицу меньше длины этого массива. Это
значит, что есть простой способ получить последний элемент массива,
какой бы ни была его длина:
maniacs[maniacs.length - 1];
"Дот"
3. Массивы 55
Мы попросили JavaScript вернуть элемент из нашего массива, но вме-
сто числового индекса ввели в квадратных скобках выражение: длина
массива минус 1. JavaScript нашел свойство maniacs.length со значе-
нием 3, вычел 1, получив 2, и наконец вернул элемент с индексом 2 — это
и есть последний элемент, "Дот".
Добавление элементов в массив
Чтобы добавить элемент к концу массива, можно воспользоваться мето-
Push —
дом push. Введите .push после имени массива, а после в круглых скоб-
буквально
ках укажите элемент, который нужно добавить:
«протолкнуть,
добавить»
var animals = [];
Animals —
animals.push("Кот");
животные
1
animals.push("Пес");
2
animals.push("Лама");
3
animals;
["Кот", "Пес", "Лама"]
animals.length;
3
Командой var animals = []; мы создали пустой мас-
сив animals, а затем методом push добавили туда элемент
"Кот". Потом снова использовали push, добавив "Пес",
а затем "Лама". Запросив теперь содержимое массива
animals, мы видим, что "Кот", "Пес" и "Лама" стоят там
в том же порядке, в каком мы их добавляли.
Запуск метода в программировании называется вызо-
вомметода. При вызове метода push происходят две вещи.
Во-первых, в массив добавляется элемент, указанный в скоб-
ках. Во-вторых, метод задает новую длину массива. Именно
эти значения длины появляются в консоли после каждого
вызова push.
Чтобы добавить элемент в начало массива, используйте
метод .unshift(элемент):
animals;
["Кот", "Пес", "Лама"]
animals[0];
"Кот"
animals.unshift("Мартышка");
4
animals;
56 Часть I. Основы
["Мартышка", "Кот", "Пес", "Лама"]
animals.unshift("Белый медведь");
5
animals;
["Белый медведь", "Мартышка", "Кот", "Пес", "Лама"]
animals[0];
"Белый медведь"
animals[2];
"Кот"
Мы начали с массива, созданного раньше, —
["Кот", "Пес", "Лама"]. Затем добавили в его
начало элементы "Мартышка" и "Белый медведь",
отчего остальные элементы сдвинулись вперед —
при каждом добавлении их индексы увеличивались
на 1. В результате элемент "Кот", у которого раньше
был индекс 0 , оказался под индексом 2 .
Как и push, метод unshift при каждом вызове
задает новую длину массива.
Удаление элементов массива
Убрать из массива последний элемент можно, добавив к его имени
.pop(). Метод pop делает сразу два дела: удаляет последний элемент Pop —
из массива и возвращает этот элемент в виде значения. Для примера
буквально
начнем с нашего массива animals ["Белый медведь", "Мартышка",
«выдавить»
"Кот", "Пес", "Лама"]. Далее создадим новую переменную lastAnimal Last animal —
и сохраним в ней последний элемент, вызвав animals.pop().
последнее
животное
animals;
["Белый медведь", "Мартышка", "Кот", "Пес", "Лама"]
var lastAnimal = animals.pop();
lastAnimal;
"Лама"
animals;
["Белый медведь", "Мартышка", "Кот", "Пес"]
animals.pop();
"Пес"
animals;
["Белый медведь", "Мартышка", "Кот"]
animals.unshift(lastAnimal);
4
animals;
["Лама", "Белый медведь", "Мартышка", "Кот"]
При вызове animals.pop() в строке последний элемент массива
animals, "Лама", был возвращен и сохранен в переменной lastAnimal.
3. Массивы 57
Кроме того, элемент "Лама" был удален из массива, в котором после
этого осталось четыре элемента. При следующем вызове animals.pop()
в строке был удален из массива и возвращен элемент "Пес", а элемен-
тов в массиве осталось всего три.
Вызвав animals.pop() для элемента "Пес", мы не сохранили это
значение в переменной, и оно пропало. С другой стороны, элемент "Лама"
был сохранен в переменной lastAnimal, чтобы при случае им можно было
снова воспользоваться. В строке мы с помощью unshift(lastAnimal)
добавили "Лама" обратно, в начало массива. В итоге получился массив
["Лама", "Белый медведь", "Мартышка", "Кот"].
Методы push и pop хорошо друг друга дополняют, поскольку порой
нужно работать только с концом массива. Вы можете добавить элемент
в конец вызовом push, а потом, когда это понадобится, забрать его оттуда
вызовом pop. Мы рассмотрим это на примере чуть позже в этой главе.
"
"Лама
["Белый медведь", "Мартышка", "Кот", "Пес", ]