push
pop
"Лама
["Кот", "Пес", ]
"
Чтобы удалить из массива первый элемент, вернув его значение,
используйте .shift():
animals;
["Лама", "Белый медведь", "Мартышка", "Кот"]
First animal —
var firstAnimal = animals.shift();
первое
firstAnimal;
животное
"Лама"
animals;
["Белый медведь", "Мартышка", "Кот"]
Метод animals.shift() работает аналогично animals.pop(),
но элемент берется из начала массива. В начале этого примера массив
animals имел вид ["Лама", "Белый медведь", "Мартышка", "Кот"].
Вызов .shift() вернул первый элемент, "Лама", который мы сохранили
в переменной fi rstAnimal. Поскольку .shift() не только возвращает
элемент, но и удаляет его, в массиве animals осталось лишь ["Белый
медведь", "Мартышка", "Кот"].
58 Часть I. Основы
Методы unshift и shift добавляют и удаляют элементы с начала
массива — так же как push и pop добавляют и удаляют элементы с конца.
"Лама"
[ , "Белый медведь", "Мартышка", "Кот"]
shift
unshift
"Лама"
[ , "Белый медведь", "Мартышка", "Кот"]
Объединение массивов
Чтобы «склеить» два массива, создав таким образом
новый массив, используйте команду fi rstArray.
First Array —
concat(otherArray). Метод concat создает мас-
первый массив
сив, в котором элементы из fi rstArray будут распо-
Other Array —
ложены перед элементами из otherArray.
другой массив
Пускай у нас есть два списка — список
пушистых животных и список чешуйчатых
животных — и мы хотим их объединить. Если
поместить наших пушистых животных в мас-
Furry animals —
сив furryAnimals, а чешуйчатых — в мас-
пушистые
сив scalyAnimals, команда furryAnimals.
животные
concat(scalyAnimals) создаст новый массив,
Scaly animals —
в начале которого будут элементы из первого мас-
чешуйчатые
сива, а в конце — из второго.
животные
var furryAnimals = ["Альпака", "Кольцехвостый лемур", "Йети"]; var scalyAnimals = ["Удав", "Годзилла"];
var furryAndScalyAnimals = furryAnimals.concat(scalyAnimals);
Furry and scaly
furryAndScalyAnimals;
animals —
["Альпака", "Кольцехвостый лемур", "Йети", "Удав", "Годзилла"]
пушистые
и чешуйчатые
furryAnimals;
животные
["Альпака", "Кольцехвостый лемур", "Йети"]
scalyAnimals;
["Удав", "Годзилла"]
3. Массивы 59
Хоть команда fi rstArray.concat(otherArray) и возвращает мас-
сив, содержащий все элементы из fi rstArray и otherArray, сами эти
массивы остаются прежними. Запросив содержимое furryAnimals
и scalyAnimals, мы видим, что массивы не изменились.
Объединение нескольких массивов
С помощью concat можно объединить больше чем два массива. Для этого
укажите дополнительные массивы в скобках, разделив их запятыми:
var furryAnimals = ["Альпака", "Кольцехвостый лемур", "Йети"]; Feathered
var scalyAnimals = ["Удав", "Годзилла"];
Animals —
var featheredAnimals = ["Ара", "Додо"];
животные
var allAnimals = furryAnimals.concat(scalyAnimals,
с перьями
featheredAnimals);
All animals —
allAnimals;
все животные
["Альпака", "Кольцехвостый лемур", "Йети", "Удав", "Годзилла",
"Ара", "Додо"]
Мы видим, что пернатые животные из массива featheredAnimals
оказались в самом конце нового массива, поскольку featheredAnimals
был указан последним в скобках метода concat.
Метод concat удобен, когда нужно объединить несколько массивов
в один. Скажем, пусть у вас есть список любимых книг и у вашего друга
тоже есть свой список, и вы решили выяснить, можно ли купить все эти
книги в магазине по соседству. Тогда будет проще, если у вас будет не два
списка, а один. Просто объедините ваш список со списком вашего друга
методом concat, и пожалуйста — у вас один список на двоих!
Поиск индекса элемента в массиве
Чтобы выяснить, какой у определенного элемента индекс в мас-
Color — цвет
сиве, используйте .indexOf("элемент"). Создадим массив colors
с названиями цветов, а затем получим индексы элементов «синий»
и «зеленый» с помощью команд 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("Протекающий гидрант");