Объекты в JavaScript
Вы уже знаете функции и замыкания — логику можно собирать. Реальным страницам нужны и структурированные данные: название, цена и остаток товара живут вместе. Объект — это одно значение, которое держит несколько именованных частей.
Что значит объект
Объект хранит связанные данные как свойства (properties). У каждого свойства есть ключ (key) — имя — и значение (value). Новички обычно начинают с литерала объекта: фигурные скобки { } и пары ключ: значение. Класс для этого первого шага не нужен.
Четыре части, на которые смотреть
📊 Литерал, ключ, значение и доступ
| Часть | Роль | Подсказка новичку |
|---|---|---|
| литерал объекта | значение { … }, которое вы присваиваете переменной |
одна сумка связанных данных |
| ключ | имя свойства слева от : |
как вы помечаете кусок |
| значение | данные справа от : |
строка, число, логическое, … |
| доступ | чтение или запись через . или [ ] |
как потом добраться до одного куска |
Если можете указать на эти четыре, объясните почти любой первый пример с объектом. Удивление часто не в скобках — а в том, что одна переменная теперь несёт несколько именованных полей.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
Фигурные скобки собирают объект
book — одно значение. Внутри title и pages — свойства. Запятые разделяют пары. После } объект готов. Вывод book показывает всю сумку в консоли.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
Точка достаёт одно поле
Имя объекта, точка, затем ключ: book.title. Это строка "Maps". Точечная запись — обычный способ читать известное имя свойства. Ключ в этой форме должен быть похож на допустимый идентификатор.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Скобки тоже достают поле
Здесь book["title"] — то же значение, что и book.title. Скобки принимают строку (или выражение, которое станет ключом). Используйте их, когда ключ в переменной или имя не простой идентификатор. Для фиксированных имён точка обычно яснее.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
Свойство можно обновить позже
Присваивание в book.pages меняет это поле. Объект остаётся той же сумкой; одно значение внутри новое. Повторное чтение показывает 140. Дальнейшие уроки углубят добавление и перечисление свойств — здесь цель — ясное первое обновление.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Связанные поля путешествуют вместе
name и price описывают товар в магазине. Держать их на одном объекте лучше, чем две разрозненные глобальные переменные. Когда вы передаёте item в функцию или кладёте на страницу, оба поля движутся как одно целое.
Показать поле объекта на странице
Создайте маленький объект товара, прочитайте свойство и положите этот текст в абзац.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
Абзац показывает Lamp — 25. Измените только name или price объекта, обновите страницу и прочитайте новую строку. Дальше — свойства объекта глубже: как ведут себя ключи и повседневная работа с ними.
Шаги практики
- Создайте объект с двумя свойствами через литерал.
- Выведите одно свойство через точку в консоль.
- Выведите то же свойство через скобки и строковый ключ.
- Измените свойство и прочитайте новое значение.
- Соберите
itemсnameиprice; выведите оба поля. - В HTML-демо измените только значения объекта, обновите, прочитайте абзац.
Частые ошибки
- Считать объект нумерованным списком (это ближе к массиву, позже в курсе)
- Забывать кавычки у строковых значений —
title: Mapsбез кавычек неверно - Путать ключ и значение, объясняя литерал
- Ждать методы,
thisили глубокие инструменты свойств уже на этой первой странице — они позже - Создавать отдельную глобальную переменную на каждое поле вместо одного объекта
Кратко
- Объект группирует связанные значения как именованные свойства
- Литерал имеет вид
{ ключ: значение, … } - Точечная запись (
obj.key) читает известное свойство - Скобочная запись (
obj["key"]) читает со строковым ключом - Присваиванием в свойство можно обновить его позже
- Связанные поля остаются вместе, когда объект перемещается
- Обновления страницы могут собирать строки из полей объекта
- Дальше: свойства объекта — глубже работа с ключами
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху