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
Проверь себя
- Когда использовать квадратные скобки?
- Как проверить наличие свойства?
- Как удалить свойство?