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

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

и освоили много способов доступа к их элементам.

Массивы JavaScript — один из способов хранения множества значений

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

гим способом объединения значений в единую сущность. Для доступа

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

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

УПРА ЖНЕНИЯ

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

упражнения.

#1. Новые дразнилки

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

слов.

#2. Изощренные дразнилки

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

нилки такого типа: «У тебя [часть тела] еще более [прилагатель-

ное], чем [часть тела животного] у [животное]».

Подсказка: нужно будет создать еще один массив.

#3. Оператор + или join?

Сделайте две версии своего генератора дразнилок: одна пусть

использует для составления дразнилки оператор +, а другая соз-

дает массив со словами и соединяет их через пробел с помощью

join. Какой вариант вам больше нравится и почему?

#4. Соединение чисел

Как с помощью метода join превратить массив [3, 2, 1] в строку

"3 больше, чем 2 больше, чем 1"?

4

О Б Ъ Е К Т Ы

Объекты JavaScript очень похожи на массивы, но для доступа к элемен-

там объектов используются строки, а не числа. Эти строки называют

ключами, или свойствами , а элементы, которые им соответствуют, —

значениями . Вместе эти фрагменты информации образуют пары «ключ-

значение» . Причем если массивы используются главным образом как

списки, хранящие множество элементов, то объекты часто применяют

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

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

названия разных животных. Но что если нужно хранить набор различ-

ных сведений об одном конкретном животном?

Создание объектов

Для хранения всевозможной информации об одном животном подойдет

JavaScript-объект. Вот пример объекта, где хранятся сведения о трехно-

гой кошке по имени Гармония.

var cat = {

Cat — кошка

"legs": 3,

Legs — ноги

"name": "Гармония",

Color — цвет,

"color": "Черепаховый"

окрас

};

Мы создали переменную под названием cat и присвоили ей объект

с тремя парами «ключ-значение» (лапы, имя, окрас). При создании объ-

екта используются фигурные скобки {} вместо квадратных, к которым

70

мы привыкли, создавая массивы. Внутри фигурных ско-

бок можно вводить пары «ключ-значение», а вместе скобки

и пары значений называются литералом объекта . Литерал

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

содержимым.

! Мы уже встречались с литералами массивов (например, ["a", "б",

"в"] ), числовыми литералами (например, 37 ), строковыми литера-

лами (например, "лось" ) и булевыми литералами ( true и false ).

Литерал — это когда значение записывается сразу и целиком,

а не составляется постепенно, шаг за шагом.

Например, чтобы создать массив с числами от 1 до 3, можно вве-

сти литерал массива [1, 2, 3] . Альтернативный способ — создать

пустой массив и методом push добавить в него значения 1, 2 и 3.

Не всегда заранее известно, что за данные будут храниться в мас-

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

одних лишь литералов не получится.

Key — ключ

{ "key1": 99 }

Ключ, обязательно

Значение

строковый

любого типа

Рис. 4.1. Общий синтаксис создания объекта

На рис. 4.1 показан базовый синтаксис создания нового объекта.

При создании объекта ключ записывается перед двоеточием (:),

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

значения, стоящие слева, присваиваются именам (ключам), стоящим

справа, что похоже на создание переменных со значениями. Все пары

«ключ-значение» должны быть разделены запятыми — в нашем примере

эти запятые стоят в конце строк. И обратите внимание, что после завер-

шающей пары «ключ-значение» ("color": "Черепаховый") запятую

ставить не нужно — следом за этой парой ставится закрывающая фигур-

ная скобка.

Ключи без кавычек

Создавая первый объект, мы писали имена ключей в кавычках, однако

это не обязательно. Следующая запись тоже является допустимым лите-

ралом объекта:

71

var cat = {

legs: 3,

name: "Гармония",

color: "Черепаховый"

};

JavaScript знает, что ключи всегда строковые, поэтому можно обхо-

диться без кавычек. В этом случае имена ключей должны соответ-

ствовать тем же правилам, что и имена переменных: например, в них

не должно быть пробелов. Но если ключ указан в кавычках, пробелы

в его имени допустимы:

var cat = {

legs: 3,

Full name —

"full name": "Гармония Филомена Уси-Пусечка Морган",

полное имя

color: "Черепаховый"

};

Помните, что, хотя ключ всегда является стро-

ковым (в кавычках он записан или без), значение,

соответствующее этому ключу, может быть любого

типа — даже переменной, в которой хранятся

данные.

Кроме того, весь объект можно записать одной

строкой, хотя читать такую программу будет, пожа-

луй, не слишком удобно:

var cat = { legs: 3, name: "Гармония", color: "Черепаховый" };

Доступ к значениям внутри объектов

Хранящиеся в объектах значения можно получить с помощью квадрат-

ных скобок — так же, как элементы массива. Единственное различие

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

cat["name"];

"Гармония"

Точно так же, как необязательны кавычки при записи литерала объ-

екта, их можно опускать и при доступе к значениям по ключу. Однако

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

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

cat.name;

"Гармония"

Такую запись называют точечной нотацией . Вместо того чтобы

писать имя ключа в кавычках внутри квадратных скобок, мы просто ста-

вим точку, после которой пишем имя ключа, без кавычек. И, аналогично

ключам без кавычек при записи литерала, такой прием сработает, только

если ключ не содержит специальных символов — например, пробелов.

Теперь предположим, что вы хотите узнать, какие вообще ключи

есть у данного объекта. Для этого в JavaScript есть удобное средство —

команда Object.keys():

Object key —

ключ объекта

Dog — пес

var dog = { name: "Оладушек", age: 6, color: "белый", 

Bark — лай

bark: "Гав тяф тяф!" };

var cat = { name: "Гармония", age: 8, color: "черепаховый" };

Object.keys(dog);

["name", "age", "color", "bark"]

Object.keys(cat);

["name", "age", "color"]

Object.keys(anyObject) возвращает массив, содержащий все ключи

объекта anyObject.