JavaScript для детей. Самоучитель по программированию
жүктеу/скачать 6,41 Mb. Pdf көрінісі
|
JavaScript для детей
Часть I. Основы Массив друзей Давайте рассмотрим более сложный пример — массив объектов со све- дениями о друзьях, где в каждый из объектов вложено по еще одному массиву. Сначала создадим объекты, а затем поместим их в массив. var anna = { name: "Анна", age: 11, luckyNumbers: [2, 4, 8, 16] }; 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 — массив, содержа- щий несколько чисел. Теперь создадим массив друзей: var friends = [anna, dave, kate]; Итак, в переменной friends находится массив с тремя элементами: anna, dave и kate (каждый из них является объектом). Мы можем полу- чить любой из объектов по его индексу в массиве: friends[1]; { name: " Дэйв ", age: 5 , luckyNumbers: Array[3] } Здесь мы извлекли из массива второй объект, dave (по индексу 1). Вместо массива luckyNumbers Chrome напечатал Array[3], что озна- чает «это массив с тремя элементами» (можно изучить содержимое этого массива с помощью Chrome, см. раздел «Исследование объектов в консоли» на с. 77.) Также мы можем получить значение, хранящееся в объекте, указав индекс объекта в квадратных скобках, поставив точку и написав соответствующий ключ: friends[2].name " Кейт " Этот код запрашивает элемент по индексу 2 (что соответствует пере- менной kate), а затем — свойство этого объекта, хранящееся по ключу "name" (это "Кейт"). Можно даже получить значение из массива, находя- щегося в объекте, который, в свою очередь, находится в массиве friends: Lucky numbers — счастливые числа Friends — друзья Array — массив 4. Объекты 77 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. Исследование объектов в консоли Chrome позволяет изучать содержимое объектов, показанных в консоли. Например, если вы введете friends[1]; Chrome отобразит то, что показано на рис. 4.3. var friends = [ anna , dave, kate]; friends[0] { name: "Аннa", age: 11, luckyNumbers: [2, 4 , 8, 16] }; friends[0].luckyNumbers friends[0].luckyNumbers[1] Рис. 4.2. Доступ ко вложенным значениям Рис. 4.3. Отображение объекта в интерпретаторе Chrome 78 Часть I. Основы Треугольник слева обозначает, что объект можно раскрыть. Для этого кликните мышкой по объекту, и увидите то, что показано на рис. 4.4. Рис. 4.4. Раскрытие объекта Массив luckyNumbers также можно раскрыть, кликнув по нему (рис. 4.5). Рис. 4.5. Раскрытие вложенного в объект массива Не беспокойтесь о свойствах с названием __proto __, они отно- сятся к прототипу объекта. Мы поговорим о прототипах позже, в главе 12. Обратите внимание, что помимо элементов массива интерпретатор показывает его свойство length. Также вы можете просмотреть массив friends целиком и раскрыть каждый его элемент, как показано на рис. 4.6. Рис. 4.6. Все три объекта из массива friends, как отображает их интерпретатор Chrome Length — длина 4. Объекты 79 Что полезного можно сделать с объектами Теперь, когда вам известны разные способы создания объектов и добав- ления к ним свойств, давайте применим эти знания на практике, введя несколько простых программ. Учет долгов Предположим, вы решили открыть банк. Вы одолжили друзьям денег и теперь думаете, как вести учет того, кто и сколько вам должен. Можно использовать объект как способ связать строку с числом. Строкой в нашем случае будет имя друга, а числом — сумма, которую вам должны: var owedMoney = {}; owedMoney["Джимми"] = 5; owedMoney["Анна"] = 7; owedMoney["Джимми"]; 5 owedMoney["Элис"]; undefined В строке мы создали пустой массив owedMoney. В строке мы присвоили ключу "Джимми" значение 5, а в строке присвоили значение 7 ключу "Анна". В строке , запросив значение, связанное с ключом "Джимми", мы получили 5. Затем в строке , пытаясь узнать значение, связанное с ключом "Элис", мы полу- чили ответ undefi ned, поскольку такой ключ не задан. Теперь представим, что Джимми занял у вас еще немного денег (скажем, 3 доллара). Пора обновить данные в нашем объекте, добавив 3 к долгу Джимми — используем для этого оператор «плюс равно» (+=), речь о котором шла во второй главе. owedMoney["Джимми"] += 3; owedMoney["Джимми"]; 8 Это примерно то же самое, что и owedMoney["Джимми"] = owedMoney["Джимми"] + 3. Также можно посмотреть на объект цели- ком, чтобы выяснить, сколько денег задолжал каждый из друзей: Owed money — одолженная сумма денег |