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

и «зеленый» с помощью команд colors.indexOf("синий") и colors.

indexOf("зеленый"). Поскольку "синий" располагается по индексу 2,

colors.indexOf("синий") вернет 2. А "зеленый" находится по ин-

дексу 1, так что colors.indexOf("зеленый") вернет 1.

var colors = ["красный", "зеленый", "синий"];

colors.indexOf("синий");

2

colors.indexOf("зеленый");

1

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

Метод indexOf похож на квадратные скобки, только здесь все наобо-

рот: команда colors[2] вернет "синий", а colors.indexOf("синий")

вернет 2.

colors[2];

"синий"

colors.indexOf("синий");

2

Хотя элемент "синий" стоит третьим по порядку, его индекс равен 2,

ведь мы всегда считаем с 0. Разумеется, то же относится к "зеленый"

с индексом 1.

Если элемента, индекс которого вы запрашиваете, в массиве нет,

JavaScript вернет значение −1.

colors.indexOf("фиолетовый");

-1

Таким образом JavaScript сообщает: «элемент не найден», так или

иначе возвращая из метода число.

Если элемент встречается в массиве больше чем один раз, indexOf

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

var insects = ["Пчела", "Муравей", "Пчела", "Пчела", "Муравей"]; Insects —

insects.indexOf("Пчела");

насекомые

0

Превращаем массив в строку

Воспользовавшись методом .join(), можно соединить все элементы

Join —

массива в одну большую строку.

соединить

Boring

var boringAnimals = ["Мартышка", "Кот", "Рыба", "Ящерица"]; animals —

boringAnimals.join();

скучные

"Мартышка,Кот,Рыба,Ящерица"

животные

Метод join возвращает строку, в которой через запятую перечис-

лены все элементы массива boringAnimals. Но что если мы не хотим

использовать в качестве разделителя запятую?

Нам поможет метод .join ("разделитель"), который делает все

то же самое, но вместо запятых ставит между элементами выбранный

3. Массивы 61

разделитель. Давайте попробуем три разных разделителя:

дефис с пробелами по сторонам, звездочку * и союз «и»

с пробелами по сторонам. Обратите внимание: разделитель

нужно записывать в кавычках — ведь это строка.

var boringAnimals = ["Мартышка", "Кот", "Рыба", "Ящерица"]; boringAnimals.join(" - ");

"Мартышка - Кот - Рыба - Ящерица"

boringAnimals.join("*")

"Мартышка*Кот*Рыба*Ящерица"

boringAnimals.join(" и ")

"Мартышка и Кот и Рыба и Ящерица"

Этот вариант join удобен, когда у вас есть массив, из которого нужно

Среднее

сделать строку. Предположим, у вас много средних имен и вы решили

имя — имя,

хранить их все в массиве вместе со своим личным именем и фамилией.

обычно рас-

И вдруг кому-то понадобилось ваше полное имя в виде строки. Тогда

положенное

метод join с разделителем-пробелом преобразует все имена в искомую

между лич-

ным именем

строку:

и фамилией.

Используется

как элемент

var myNames = ["Николас", "Эндрю", "Максвелл", "Морган"]; полного

myNames.join(" ");

имени,

"Николас Эндрю Максвелл Морган”

в основном

в Европе

и западных

Не будь метода join, пришлось бы соединять элементы вручную,

странах.

что очень утомительно:

myNames[0] + " " + myNames[1] + " " + myNames[2] + " " + myNames[3];

"Николас Эндрю Максвелл Морган"

Кроме того, этот код сработает, только если у вас ровно два средних

имени. Если же их три или одно, программу придется менять. А c join

ничего менять не надо — этот метод соединит в строку все элементы

массива независимо от его длины.

Если же в массиве хранятся нестроковые значения, JavaScript преоб-

разует их в строки перед тем, как соединить:

var ages = [11, 14, 79];

Ages —

ages.join(" ");

возрасты

"11 14 79"

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

Что полезного можно сделать с массивами

Теперь вы умеете разными способами создавать массивы и знаете немало

действий с ними. Но как все это может вам пригодиться в жизни? В этом

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

тическому использованию массивов.

Поиск дороги домой

Представьте, что ваша подруга побывала у вас в гостях, а теперь хочет

показать вам свой дом. Но вот незадача — вы никогда не бывали у нее

раньше, а путь назад вам предстоит проделать в одиночку.

К счастью, вам в голову приходит хитрый способ решения этой про-

блемы: по дороге к дому подруги вы будете записывать возможные ори-

ентиры (телефонную будку, вывеску магазина или аптеки, школу и т. д.).

А по дороге назад, двигаясь по списку с конца, вычеркивать каждый

встреченный ориентир — так вы всегда будете знать, куда идти дальше.

Построение массива с помощью push

Давайте напишем код для выполнения этих действий. Начнем с создания

массива — пустого, поскольку, пока вы еще не отправились в гости, неиз-

вестно, какие ориентиры вам повстречаются. Затем, по дороге к дому

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

сив с помощью push. И наконец, когда придет время идти домой, будем

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

var landmarks = [];

landmarks.push("Мой дом");

landmarks.push("Дорожка к дому");

landmarks.push("Мигающий фонарь");

landmarks.push("Протекающий гидрант");

landmarks.push("Пожарная станция");

landmarks.push("Приют для кошек");

landmarks.push("Моя бывшая школа");

landmarks.push("Дом подруги");

Здесь мы создали пустой массив landmarks и методом push сохра-

Landmarks —

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

заметные

объекты

Движемся в обратном порядке с помощью pop

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

Разумеется, первым стоит "Мой дом", потом "Дорожка к дому", и т. д.

до конца массива, где находится элемент "Дом подруги". Теперь, когда

наступит время идти домой, вам останется лишь изымать из массива

по одному элементу, и всегда будет понятно, куда идти дальше.

3. Массивы 63

landmarks.pop();

"Дом подруги"

landmarks.pop();

"Моя бывшая школа"

landmarks.pop();

"Приют для кошек"

landmarks.pop();

"Пожарная станция"

landmarks.pop();

"Протекающий гидрант"

landmarks.pop();

"Мигающий фонарь"

landmarks.pop();

"Дорожка к дому"

landmarks.pop();

"Мой дом"

Вот вы и дома!

Заметили, что первый ориентир, который вы поместили

в массив методом push, оказался также последним, который

вы извлекли методом pop? А последний добавленный ориентир

оказался первым извлеченным? Может показаться, что лучше

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

однако извлекать элементы в обратном порядке в некоторых

случаях удобно.

Такой подход нередко используется в больших програм-

мах — именно поэтому push и pop в JavaScript всегда под

рукой.

! Среди программистов такой способ работы с элементами называ-

ется «стек». Представьте, что стек — это стопка блинов. Всякий

раз, когда готов новый блин, его кладут сверху стопки (как метод

push ), и, когда вы берете блин, чтобы его съесть, вы тоже берете

его сверху (как метод pop ). Снятие элементов со стека похоже