Массивы объектов
До этого момента мы рассматривали только массивы и объекты, в кото-
рых содержатся данные простых типов, такие как числа и строки. Однако
ничто не мешает сделать элементом массива или объекта другой массив
или объект. Например, так может выглядеть массив с объектами, описы-
вающими динозавров:
var dinosaurs = [
{ name: "Тираннозавр рекс", period: "Верхнемеловой" },
{ name: "Стегозавр", period: "Верхнеюрский" },
Period —
{ name: "Платеозавр", period: "Триасовый" }
период
];
Получить сведения о первом динозавре можно уже известным нам
способом — указав индекс в квадратных скобках:
dinosaurs[0];
{ name: "Тираннозавр рекс", period: "Верхнемеловой" }
А если нужно только название первого динозавра, достаточно ука-
зать ключ объекта в еще одних квадратных скобках, следом за индексом:
dinosaurs[0]["name"];
"Тираннозавр рекс"
Другой вариант — воспользоваться точечной нотацией:
dinosaurs[1].period;
"Верхнеюрский"
! Точечную нотацию можно использовать только с объектами, для
массивов она не подходит.
4. Объекты 75
Массив друзей
Давайте рассмотрим более сложный пример — массив объектов со све-
дениями о друзьях, где в каждый из объектов вложено по еще одному
массиву. Сначала создадим объекты, а затем поместим их в массив.
Lucky
var anna = { name: "Анна", age: 11, luckyNumbers: [2, 4, 8, 16] };
numbers —
var dave = { name: "Дэйв", age: 5, luckyNumbers: [3, 9, 40] };
счастливые
var kate = { name: "Кейт", age: 9, luckyNumbers: [1, 2, 3] };
числа
Мы создали три объекта, сохранив их в переменных anna, dave
и kate. У каждого из этих объектов есть по три свойства: name, age
и luckyNumbers. Каждому ключу name соответствует строковое значе-
ние, ключу age — числовое, а ключу luckyNumbers — массив, содержа-
щий несколько чисел.
Теперь создадим массив друзей:
Friends —
var friends = [anna, dave, kate];
друзья
Итак, в переменной friends находится массив с тремя элементами:
anna, dave и kate (каждый из них является объектом). Мы можем полу-
чить любой из объектов по его индексу в массиве:
friends[1];
Array —
{ name: "Дэйв", age: 5, luckyNumbers: Array[3] }
массив
Здесь мы извлекли из массива второй объект, dave (по индексу 1).
Вместо массива luckyNumbers Chrome напечатал Array[3], что озна-
чает «это массив с тремя элементами» (можно изучить содержимое
этого массива с помощью Chrome, см. раздел «Исследование объектов
в консоли» на с. 77. ) Также мы можем получить значение, хранящееся
в объекте, указав индекс объекта в квадратных скобках, поставив точку
и написав соответствующий ключ:
friends[2].name
"Кейт"
Этот код запрашивает элемент по индексу 2 (что соответствует пере-
менной kate), а затем — свойство этого объекта, хранящееся по ключу
"name" (это "Кейт"). Можно даже получить значение из массива, находя-
щегося в объекте, который, в свою очередь, находится в массиве friends:
76 Часть I. Основы
friends[0].luckyNumbers[1];
4
Использованные в этом примере индексы показаны на рис. 4.2.
friends[0] — это элемент по индексу 0 из массива friends, то есть объ-
ект anna.friends[0].luckyNumbers — это массив [2, 4, 8, 16] из объ-
екта anna. И наконец, friends[0].luckyNumbers[1] — это значение
по индексу 1 из массива luckyNumbers — то есть число 4.
friends[0]
var friends = [anna, dave, kate];
friends[0].luckyNumbers
{ name: "Аннa", age: 11, luckyNumbers: [2, 4, 8, 16] };
friends[0].luckyNumbers[1]
Рис. 4.2. Доступ ко вложенным значениям
Исследование объектов в консоли
Chrome позволяет изучать содержимое объектов, показанных в консоли.
Например, если вы введете
friends[1];
Chrome отобразит то, что показано на рис. 4.3.
Рис. 4.3. Отображение объекта в интерпретаторе Chrome
4. Объекты 77
Треугольник слева обозначает, что объект можно раскрыть. Для этого
кликните мышкой по объекту, и увидите то, что показано на рис. 4.4.
Рис. 4.4. Раскрытие объекта
Массив luckyNumbers также можно раскрыть, кликнув по нему
(рис. 4.5).
Length —
длина
Рис. 4.5. Раскрытие вложенного в объект массива
Не беспокойтесь о свойствах с названием __proto __, они отно-
сятся к прототипу объекта. Мы поговорим о прототипах позже, в главе 12.
Обратите внимание, что помимо элементов массива интерпретатор
показывает его свойство length.
Также вы можете просмотреть массив friends целиком и раскрыть
каждый его элемент, как показано на рис. 4.6.
Рис. 4.6. Все три объекта из массива friends , как отображает их интерпретатор Chrome 78 Часть I. Основы
Что полезного можно сделать с объектами
Теперь, когда вам известны разные способы создания объектов и добав-
ления к ним свойств, давайте применим эти знания на практике, введя
несколько простых программ.
Учет долгов
Предположим, вы решили открыть банк. Вы одолжили друзьям денег
и теперь думаете, как вести учет того, кто и сколько вам должен.
Можно использовать объект как способ связать строку с числом.
Строкой в нашем случае будет имя друга, а числом — сумма, которую
вам должны:
var owedMoney = {};
Owed money —
owedMoney["Джимми"] = 5;
одолженная
owedMoney["Анна"] = 7;
сумма денег
owedMoney["Джимми"];
5
owedMoney["Элис"];
undefined
В строке мы создали пустой массив owedMoney.
В строке мы присвоили ключу "Джимми" значение 5,
а в строке присвоили значение 7 ключу "Анна".
В строке , запросив значение, связанное с ключом
"Джимми", мы получили 5. Затем в строке , пытаясь
узнать значение, связанное с ключом "Элис", мы полу-
чили ответ undefi ned, поскольку такой ключ не задан.
Теперь представим, что Джимми занял у вас
еще немного денег (скажем, 3 доллара). Пора
обновить данные в нашем объекте, добавив 3
к долгу Джимми — используем для этого оператор
«плюс равно» (+=), речь о котором шла во второй
главе.
owedMoney["Джимми"] += 3;
owedMoney["Джимми"];
8
Это примерно то же самое, что и owedMoney["Джимми"] =
owedMoney["Джимми"] + 3. Также можно посмотреть на объект цели-
ком, чтобы выяснить, сколько денег задолжал каждый из друзей:
4. Объекты 79
owedMoney;
{ Джимми: 8, Анна: 7 }
Хранение информации о фильмах
Предположим, у вас большая коллекция кино на DVD и Blu-
ray. Правда было бы здорово хранить информацию об этих
фильмах на компьютере, чтобы в случае чего быстро найти
сведения о том или ином фильме?
Для этого можно создать объект, каждый ключ в кото-
ром — это название фильма, а каждое значение — другой объ-
ект, в котором содержится информация об этом фильме. Да,
хранящиеся в объекте значения тоже могут быть объектами!
var movies = {
Movies —
"В поисках Немо": {
фильмы
releaseDate: 2003,
Release date —
duration: 100,
дата выхода
actors: ["Альберт Брукс", "Эллен Дедженерес",
Duration —
"Александр Гоулд"],
продолжи-
format: "DVD"
тельность
},
"Звездные войны: Эпизод VI — Возвращение джедая": {
Actors —
releaseDate: 1983,
в ролях
duration: 134,
Format —
actors: ["Марк Хэмилл", "Харрисон Форд", "Кэрри Фишер"],
формат
format: "DVD"
},
"Гарри Поттер и Кубок огня": {
releaseDate: 2005,
duration: 157,
actors: ["Дэниел Рэдклифф", "Эмма Уотсон", "Руперт Гринт"],
format: "Blu-ray"
}
};
Наверное, вы заметили, что названия фильмов (ключи внешнего объ-
екта) я поставил в кавычки, но ключи внутренних объектов записал без
кавычек. Дело в том, что в названиях нужны пробелы — иначе пришлось
бы писать нечто вроде ЗвездныеВойныЭпизодVIВозвращениеДжедая,
а это уж совсем нелепо. Для ключей вложенных объектов кавычки нео-
бязательны, поэтому я их и не ставил. Код выглядит аккуратнее, когда
в нем нет излишних знаков пунктуации.
Теперь, если вы захотите что-то узнать о фильме, это легко сделать:
80 Часть I. Основы
var findingNemo = movies["В поисках Немо"];
findingNemo.duration;
100
findingNemo.format;
"DVD"
Мы сохранили сведения о фильме «В поисках Немо» в переменной
fi ndingNemo. Теперь достаточно обратиться к свойствам этого объекта
(таким как duration и format), чтобы получить интересующую нас
информацию.
Кроме того, в коллекцию легко добавить новые фильмы:
var cars = {
releaseDate: 2006,
duration: 117,
actors: ["Оуэн Уилсон", "Бонни Хант", "Пол Ньюман"],
format: "Blu-ray"
};
movies["Тачки"] = cars;
Здесь мы создали новый объект со сведениями о мультфильме
«Тачки» (Cars), а затем добавили его в объект movies с ключом "Тачки".
Коллекция растет, и вам может понадобиться простой способ
просмотреть названия всех своих фильмов. Для этого подойдет
Object.keys:
Object.keys(movies);
["В поисках Немо", "Звездные войны: Эпизод VI — Возвращение
джедая", "Гарри Поттер и Кубок огня", "Тачки"]
Что мы узнали
Теперь мы знаем, как устроены объекты JavaScript. Они во многом
похожи на массивы и тоже нужны для хранения множества элементов
данных в одном месте. Но есть важное отличие — для доступа к эле-
ментам объекта используются строки, тогда как элементы массива