списка значений. Мы научились создавать массивы и работать с ними
и освоили много способов доступа к их элементам.
Массивы 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.
Добавление элементов объекта
Пустой объект похож на пустой массив, только вместо квадратных ско-
бок при его создании используются фигурные:
var object = {};
Добавлять элементы объекта можно так же, как элементы мас-
сива, — но используя строки вместо чисел:
var cat = {};
cat["legs"] = 3;
cat["name"] = "Гармония";
cat["color"] = "Черепаховый";
cat;
{ color: "Черепаховый", legs: 3, name: "Гармония" }
Мы начали с пустого объекта под названием cat, а затем пооче-
редно добавили к нему три пары «ключ-значение». Потом мы ввели cat;,
4. Объекты 73
и браузер отобразил содержимое объекта. Тут надо отметить, что раз-
ные браузеры могут показывать объекты по-разному. Например, Chrome
(на момент написания этих строк) выводит объект cat в консоли следу-
ющим образом:
Object {legs: 3, name: "Гармония", color: "Черепаховый"}
Chrome перечисляет ключи в таком порядке — (legs, name, color),
но другие браузеры могут выводить их в другой очередности. Дело в том,
что JavaScript хранит ключи объектов, не упорядочивая их.
В массивах элементы расположены строго один за другим: индекс 0
перед индексом 1, индекс 3 после индекса 2; однако в случае объектов
неясно, как расположить элементы друг относительно друга. Должен ли
ключ color стоять перед legs или после? «Правильного» ответа на этот
вопрос нет, поэтому объекты хранят свои ключи без конкретной очеред-
ности, в результате чего разные браузеры показывают ключи в разном
порядке. Так что никогда не полагайтесь в своих программах на тот или
иной порядок ключей.
Добавление ключей через точку
Новые ключи также можно добавлять через точечную нотацию. Давайте
перепишем этим способом предыдущий пример, то есть создадим пустой
объект и заполним его данными:
var cat = {};
cat.legs = 3;
cat.name = "Гармония";
cat.color = "Черепаховый";
Если обратиться к несуществующему свойству объекта, JavaScript
вернет специальное значение undefi ned, сообщая таким образом: «здесь
ничего нет». Например:
var dog = {
name: "Оладушек",
legs: 4,
Is awesome —
isAwesome: true
классный
};
Is
brown
—
dog.isBrown;
коричневый
undefined
74 Часть I. Основы
Здесь мы определили три свойства
объекта dog: name, legs и isAwesome.
Свойства isBrown среди них нет, поэтому
dog.isBrown возвращает undefi ned.