JS Tower
JavaScript & TypeScriptМодуль 4: Массивы и объекты

Основы объектов

Создание и работа с объектами

Цель урока

В этом уроке ты научишься:

  • Создавать объекты
  • Получать и изменять свойства
  • Перебирать свойства объекта

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

// Литерал (рекомендуется)
let user = {
  name: "Иван",
  age: 25,
  isAdmin: false
};

// Пустой объект
let empty = {};

// Конструктор
let obj = new Object();

Доступ к свойствам

Точечная нотация

let user = {
  name: "Иван",
  age: 25
};

console.log(user.name); // "Иван"
console.log(user.age);  // 25

Квадратные скобки

let user = {
  name: "Иван",
  "full name": "Иван Петров"
};

console.log(user["name"]);      // "Иван"
console.log(user["full name"]); // "Иван Петров"

// Динамический ключ
let key = "name";
console.log(user[key]); // "Иван"

Изменение свойств

let user = {
  name: "Иван"
};

// Изменение
user.name = "Пётр";

// Добавление
user.age = 25;
user["is admin"] = true;

console.log(user);
// { name: "Пётр", age: 25, "is admin": true }

Удаление свойств

let user = {
  name: "Иван",
  age: 25,
  city: "Москва"
};

delete user.city;

console.log(user); // { name: "Иван", age: 25 }

Проверка свойств

Оператор in

let user = {
  name: "Иван",
  age: undefined
};

console.log("name" in user);  // true
console.log("age" in user);   // true
console.log("city" in user);  // false

// Сравни с проверкой значения
console.log(user.age !== undefined); // false (неточно!)

hasOwnProperty

let user = {
  name: "Иван"
};

console.log(user.hasOwnProperty("name"));     // true
console.log(user.hasOwnProperty("toString")); // false (унаследовано)

Перебор свойств

for...in

let user = {
  name: "Иван",
  age: 25,
  city: "Москва"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}
// name: Иван
// age: 25
// city: Москва

Вложенные объекты

let user = {
  name: "Иван",
  address: {
    city: "Москва",
    street: "Ленина",
    house: 10
  }
};

console.log(user.address.city);   // "Москва"
console.log(user.address.street); // "Ленина"

// Optional chaining
console.log(user.contacts?.phone); // undefined (без ошибки)

Методы объекта

let user = {
  name: "Иван",
  sayHello: function() {
    console.log("Привет!");
  },
  // Сокращённый синтаксис
  sayBye() {
    console.log("Пока!");
  }
};

user.sayHello(); // "Привет!"
user.sayBye();   // "Пока!"

Сокращённые свойства

let name = "Иван";
let age = 25;

// Полная запись
let user1 = {
  name: name,
  age: age
};

// Сокращённая запись
let user2 = { name, age };

console.log(user2); // { name: "Иван", age: 25 }

Вычисляемые свойства

let prop = "name";

let user = {
  [prop]: "Иван",
  ["is" + "Admin"]: true
};

console.log(user); // { name: "Иван", isAdmin: true }

Практика

Задание 1: Создание объекта

Задача: Создай объект с информацией о книге.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
{"title":"1984","author":"Оруэлл","year":1949,"pages":328}

Задание 2: Изменение

Задача: Добавь свойство и измени существующее.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
{"name":"Телефон","price":45000,"discount":10}

Задание 3: Перебор

Задача: Выведи все свойства объекта.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
brand: Toyota
model: Camry
year: 2020

Проверь себя

  1. Когда использовать квадратные скобки?
  2. Как проверить наличие свойства?
  3. Как удалить свойство?