JavaScript для детей

Рис. 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. Они во многом

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

данных в одном месте. Но есть важное отличие — для доступа к эле-

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

расположены по числовым индексам. Поэтому массивы отсортированы

по порядку, а объекты нет.

В дальнейших главах, когда мы больше узнаем о возможностях

JavaScript, мы научимся использовать объекты для многих других задач.

В следующей главе речь пойдет об HTML — языке разметки веб-страниц.