Загрузка...

Свойства объекта

Литерал и чтение через точку уже в ящике с инструментами. На настоящей форме меняется сама сумка: после выбора цвета появляется поле, при сохранении пропадает флаг черновика, а город сидит внутри адреса. Эта страница — такая повседневная работа со свойствами.

Дальше первого литерала

Страница объектов собрала сумку и прочитала поле. Здесь вы меняете, какие ключи есть: приносите имя, которого не было, отпускаете имя, которое больше не нужно, спрашиваете, на месте ли имя, входите в объект, лежащий внутри другого, и перечисляете имена, которые правда держите.

Пять ходов над свойством

📊 Добавить, убрать, проверить, вложить, перечислить

Ход Запись Что получаете
добавить item.color = "blue" новое свойство на том же объекте
убрать delete item.draft этого ключа больше нет
наличие "sku" in item true или false
вложить user.address.city поле внутри другого объекта
перечислить Object.keys(user) массив собственных ключей

Назовёте ход — строка последует. Добавление не чеканит второй объект. Удаление не превращает значение в пустую строку. Список имён — не та же работа, что чтение одного значения.

Добавить свойство, которого не было в литерале

javascript 
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

Присваивание растит отсутствующий ключ

item начался только с name и price. Раз color не было, строка item.color = "blue" его создаёт. Объект по-прежнему один, теперь с тремя свойствами. Консоль печатает blue.

Убрать свойство через delete

javascript 
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);

delete снимает ключ

delete item.draft убирает это свойство, не весь объект. После этого "draft" in item равно false. Имя и цена остаются. Записать "" или null — другой поступок: ключ остаётся, значение новое.

Спросить, есть ли ключ

javascript 
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);

in отвечает да или нет про ключ

"name" in item равно true — это имя на объекте. "sku" in item равно false — вы его не добавляли. Отсутствующее свойство читается как undefined, и сохранённый undefined читается так же. in спрашивает про ключ, не про сидящее там значение.

Прочитать поле внутри вложенного объекта

javascript 
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

Свойство может держать другой объект

address — не строка. Это объект с city и zip. Выражение user.address.city делает два шага: в address, затем в city. Консоль печатает Shiraz. Вложение держит части адреса вместе, вместо того чтобы распластать каждую на user.

Перечислить собственные ключи объекта

javascript 
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);

Object.keys отдаёт имена

Object.keys(user) возвращает массив собственных ключей — здесь ["name", "role"]. Значение вы по-прежнему читаете точкой или скобками. Список нужен, когда не хочется вписывать каждое имя заранее. Сам по себе значения он не печатает.

Сначала выберите ход, потом печатайте

Новое поле? Присвойте. Ключ должен исчезнуть? delete. Да или нет? in. Город внутри адреса? Вложите и идите по точкам. Только имена? Object.keys. Функции, лежащие на объекте, — методы — тема следующего урока.

После добавления положите вложенный город на страницу

Начните с пользователя и адреса, добавьте plan в скрипте и поставьте город в абзац.

Демо страницы — вложенный город

html 
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>

Абзац показывает Shiraz — yearly. Город уже был вложен; plan пришёл после литерала. Поменяйте только city или plan, обновите страницу и прочитайте новую строку. Дальше: методы объекта — функции, которые живут на объекте.

Шаги практики

  1. Соберите объект с двумя свойствами, добавьте третье присваиванием и выведите его.
  2. Поставьте draft, уберите через delete и проверьте "draft" in item.
  3. На объекте, где есть только name, выведите "name" in item и "sku" in item.
  4. Вложите address с city и выведите user.address.city.
  5. Выведите Object.keys для объекта с двумя ключами и прочитайте массив.
  6. В HTML-демо поменяйте только city или plan, обновите и прочитайте абзац.

Частые промахи

  • Думать, что item.color = "blue" чеканит совсем новый объект — растёт тот же
  • Писать item.draft = null, когда имелось в виду delete item.draft — ключ остаётся
  • Считать отсутствующий ключ и сохранённый undefined одним вопросом — для ключа берите in
  • Писать user.city, когда city живёт на user.address
  • Ждать, что Object.keys вернёт значения
  • Искать методы и this на этой странице — это следующий урок

Кратко

  • Присваивание отсутствующему ключу добавляет это свойство
  • delete снимает ключ; остальное у объекта остаётся
  • "key" in obj говорит, есть ли ключ
  • Свойство может держать другой объект; лишние точки идут внутрь
  • Object.keys возвращает имена, не значения
  • Вложенное поле и только что добавленное могут делить одну строку на странице
  • Дальше: методы объекта — функции, хранящиеся на объекте

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 34 из 35
Javascript Урок