Ник Морган - JavaScript для детей. Самоучитель по программированию

соли проще записывать массивы одной строкой.

Для JavaScript неважно, отформатируете вы код, расположив весь

массив на одной строке или на нескольких строках по частям. Сколько бы

ни стояло переносов, JavaScript увидит один и тот же массив — в нашем

случае состоящий из девяти строк.

3. Массивы 51

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

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

скобки с индексом нужного вам элемента, как в этом примере:

dinosaurs[0];

"Тираннозавр"

dinosaurs[3];

"Трицератопс"

Индекс — это номер элемента, в котором хранится значение.

Аналогично символам в строке, первому элементу массива соответствует

индекс 0, второму — 1, третьему — 2 и т. д. Поэтому, запросив индекс

0 в массиве dinosaurs, мы получили "Тираннозавр" (это первый эле-

мент), а запросив индекс 3 — "Трицератопс" (четвертый элемент).

Возможность доступа к отдельным элементам массива очень полез-

на. Например, если вы хотите показать кому-то самого-самого любимого

своего динозавра, ни к чему показывать весь массив. Вместо этого про-

сто возьмите первый элемент:

dinosaurs[0];

"Тираннозавр"

52 Часть I. Основы

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

Используя индекс в квадратных скобках, можно задавать или изме-

нять значения элементов и даже добавлять новые элементы. Например,

чтобы заменить содержимое первого элемента массива 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, добавив "Пес",

а затем "Лама". Запросив теперь содержимое массива