Привет! Я — Александр Дудукало, автор базового курса по JavaScript. В этой статье мы продолжим изучение работы с данными в JavaScript. Если в прошлом материале мы говорили о массивах, то теперь пришло время познакомиться с объектами. Я расскажу, как они помогают эффективно организовать и обрабатывать связанные данные. Подробности под катом!
Объекты
Чем больше пишешь код и создаешь переменных, тем яснее проявляется некая закономерность: переменные, как бы то ни было, начинают группироваться по определенным признакам или контексту. И разработчику приходится как-то решать эту задачу, например, с помощью нейминга. Давайте посмотрим на этот пример:
let currentYear = new Date().getFullYear(); // Текущий год let userName = 'Оля'; let userAge = 19; let userCity = 'Волгоград'; console.log('Пользователь:', userName); console.log('Год рождения:', currentYear - userAge); console.log('Возраст:', userAge); console.log('Город:', userCity);
Это пример, в котором переменные сгруппированы с использованием префикса user, что дает понять: данные принадлежат пользователю. Но есть ли более удобный способ? Конечно — наверняка вы уже догадались, что речь пойдет об объектах. Теперь перепишем этот код с использованием объекта:
let currentYear = new Date().getFullYear(); // Текущий год let user = { name: 'Оля', age: 19, city: 'Волгоград' } console.log('Пользователь:', user.name); console.log('Год рождения:', currentYear - user.age); console.log('Возраст:', user.age); console.log('Город:', city);Здесь показана переменная user, которая представляет собой объект, хранящий все пользовательскую информацию. Имя переменной сразу дает понять назначение, а сам объект является контейнером для этих данных.
Объект в JavaScript — это структура данных, которая позволяет хранить связанные между собой данные в виде пар «ключ-значение». В объекте могут храниться различные данные, такие как строки, числа, массивы или даже другие объекты.
Объект создается с использованием фигурных скобок {}, внутри которых перечисляются свойства объекта. Каждое свойство состоит из ключа и значения.
-
Ключ — это имя свойства объекта. Он всегда является строкой, хотя можно использовать синтаксис без кавычек для простых идентификаторов.
-
Значение — это данные, которые хранятся в свойстве. Оно может быть любого типа: строкой, числом, функцией, массивом или даже другим объектом.
А для того, чтобы получить данные из объекта и его свойства, нужно обратиться к объекту и через точку к его свойству (ключу). Все почти как с обычной переменной, только ее словно положили в отдельную коробку. Просто и удобно.
30+ бесплатных курсов на IT-темы в Академии Selectel
Для начинающих и опытных специалистов.
Работа с объектами
Объекты позволяют удобно хранить и обрабатывать данные любого типа. Давайте подробнее разберем базовые операции в работе с ними.
Создание объекта
Все просто. Вы объявляете переменную, в которую хотите присвоить объект (важно, чтобы имя переменной было существительным и четко описывало, что именно в ней хранится). Далее присваиваете объект, используя синтаксис фигурных скобок.
let product = {};Это один из способов создания объекта. Есть и другие, но мы остановимся на этом, так как он самый популярный.
Наполнение объекта данными
Чтобы объект наполнился данными, нам понадобятся свойства, а именно — пары ключ-значение. Имена свойств, как и имена переменных, должны четко описывать назначение. Обычно это существительные, в некоторых случаях, когда вы создаете «метод» (об этом в следующих статьях), — глаголы.
Свойства можно добавить сразу при создании объекта:
let product = { name: "Кофе", price: 700 }; console.log(product);
Свойства можно добавить и после того, как объект уже создан. Вот два самых популярных способа:
let product = { name: "Кофе", price: 700 }; product.weight = 200; product['date'] = '19.07.2025'; console.log(product);
В первом способе показана точечная нотация. Используется, когда имя свойства валидное (не содержит пробелов и других специальных символов).
Квадратные скобки можно использовать, если имя свойства хранится в переменной или если содержит пробелы/невалидные символы. Это бывает удобно.
Получение значений из объекта
Чтобы получить значение из свойства по его имени, вы должны обратиться к самому объекту и его свойству. Также покажу два способа:
let product = { name: "Кофе", price: 700 }; product.weight = 200; product['date'] = '19.07.2025'; console.log('Название товара:', product.name); console.log('Вес:', product['weight'], 'грамм');
Точечная нотация используется, когда имя свойства валидное, а квадратные скобки используется, когда имя свойства хранится в переменной или если оно содержит пробелы или специальные символы.
Изменение значений свойств
Вы можете переписать существующие значения свойств. Например, давайте рассчитаем стоимость товара со скидкой:
let product = { name: "Кофе", price: 700 }; console.log('Название товара:', product.name); console.log('Цена:', product.price); product.price = product.price - 100; // Новое значение console.log('Цена со скидкой:', product.price);
Вложенные объекты
В свойствах объекта можно хранить данные любых типов, включая другие объекты. Это позволяет строить сложные иерархии данных.
Пример:
let product = { name: "Кофе", price: 700, weight: 200, date: '19.07.2025', size: { width: 100, height: 120, length: 300 } }; console.log('Название товара:', product.name); console.log('Высота:', product.size.height);Таким образом, в объекте product есть вложенный объект size, который хранит размеры упаковки товара.
Для простоты изложения я не часто буду использовать такие сложные структуры. Но представьте, какие возможности по хранению и группировке данных предлагают объекты. А если совместить их с массивами, то возможности становятся еще более интересными! Но об этом мы поговорим дальше.
Объекты в массивах
Если вы читали предыдущую статью, то уже знаете о массивах и о том, как удобно их использовать для хранения больших объемов данных: списков товаров, пользователей, заказов и так далее. По сути, если сказать своими словами, массив — это структура данных, которая хранит упорядоченные элементы. В то время как объект — это тоже структура данных, но с другой организацией, где данные хранятся в виде пар ключ-значение. И вот вопрос: можно ли эти две сущности объединить в одну? Давайте разберемся на примере:
let studentsName = ['Ваня', 'Таня', 'Саша', 'Лена', 'Толя']; let studentsAge = [15, 16, 15, 15, 16]; let studentsHobby = ['спорт', 'рисование', 'монтаж', 'музыка', 'кино']; function logStudentInfo(name, age, hobby) { console.log( Имя ученика: ${name}, возраст: ${age}, увлечение: ${hobby}, ); } for (let i = 0; i < studentsName.length; i++) { logStudentInfo( studentsName[i], studentsAge[i], studentsHobby[i] ); }
Программа выводит данные об учениках в консоль. Все выглядит неплохо, но посмотрите, как хранится информация и как мы ее обрабатываем.
У нас есть три массива, каждый из которых хранит один тип данных: имена, возраст и увлечения студентов. При обработке нужно по отдельности работать с каждым массивом. Представьте, что вам нужно добавить еще одно свойство, например, адрес. Тогда придется создать еще один массив и модифицировать все остальные части программы. Как итог, код будет сложно поддерживать и масштабировать.
Теперь давайте решим эту проблему с помощью объектов:
let students = [ { name: 'Ваня', age: 15, hobby: 'спорт' }, { name: 'Таня', age: 16, hobby: 'рисование' }, { name: 'Саша', age: 15, hobby: 'монтаж' }, { name: 'Лена', age: 15, hobby: 'музыка' }, { name: 'Толя', age: 16, hobby: 'кино' } ] function logStudentInfo(student) { console.log( Имя ученика: ${student.name}, возраст: ${student.age}, увлечение: ${student.hobby}, ); } for (let i = 0; i < students.length; i++) { logStudentInfo(students[i]); }
Да, результат тот же. Но обратите внимание на код. Теперь мы используем один массив с объектами. У него есть понятное имя — students. В каждом объекте хранятся все данные о студенте: имя, возраст и увлечение. В функцию logStudentInfo() передается один объект (элемент массива) — и уже внутри функции происходит обработка данных этого студента.
Код стал намного чище и удобнее для редактирования. Добавить нового студента, обновить данные или добавить новое свойство стало проще.
Чтобы закрепить понимание работы с объектами в массивах, давайте рассмотрим, как можно добавлять новые объекты в массив и получать значения свойств:
// Добавление объектов в массив в момент его создания let products = [ { name: 'iPhone 14', price: 50000 }, { name: 'Чехол для iPhone 14', price: 700 } ] // Получение значения свойства объекта массива по индексу элемента console.log( Товар: ${products[0].name}, стоимость: ${products[0].price} ); // Добавление объекта в массив с помощью метода push() products.push({ name: 'Салфетка Apple', price: 99999 }); // Добавление элемента в массив по индексу products[3] = { name: 'Пакет', price: 15 }; // Вывод массива в виде таблицы в консоль console.table(products);
Пример с массивом products показывает, как можно добавлять новые объекты в массив с помощью метода push() или просто заменять элемент массива по индексу. Метод console.table() позволяет вывести массив объектов в виде таблицы, что делает данные более удобочитаемыми в консоли.
Подведем итог
Объекты и массивы — это мощные инструменты для эффективного хранения и обработки данных. Объекты помогают организовать связанные данные, делают код более структурированным и удобным для масштабирования. Они объединяют данные, что улучшает организацию приложения.
Хотите узнать еще больше об объектах? Тогда смотрите мое видео на YouTube.
ссылка на оригинал статьи https://habr.com/ru/articles/939298/
Добавить комментарий