Работаем с объектами в JavaScript

В прошлой статье я рассказывал о массивах в JavaScript. Из нее мы можем понять, что для хранения различных типов данных массивы не совсем подходят, так как они не могут быстро работать.

Для таких задач нам подойдут объекты, которые могут хранить в себе различные свойства (ключи и их значения). Ключ – это имя значения, которое мы хотим хранить в объекте. По нему легко искать нужное значение в объекте и выводить его (по аналогии с порядковым номером в массивах).

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

Объекты могут быть созданы с помощью конструктора объектов или фигурных скобок с необязательными свойствами внутри них. Рассмотрим создание объекта на примере:

 var obj = new Object(); var obj1 = {}; console.log(obj); //Выведет {} console.log(obj1); //Выведет {}

Как мы уже знаем, объекты могут хранить в себе данные различных типов. Давайте создадим объект с произвольными значениями и ключами:

 var obj = {    car: “машина”,    number: 6,    yes: true,    mas: [1, 2, 3] }

У каждого значения должно быть свое имя, а также запятая, если значений несколько. Запятая может стоять и после последнего свойства.

Если нам нужно использовать ключ как несколько слов или любой другой набор символов, то в этом случае мы можем использовать строки, но при выводе значения данного ключа нам понадобятся квадратные скобки. Рассмотрим на примере:

 var obj = {    “car color”: “красный”,    “1”: “один” } console.log(obj[“car color”]) //Выведет “красный” console.log(obj[“1”]) //Выведет “один”

Также мы можем сделать вычисляемые ключи в объекте с помощью квадратных скобок. Рассмотрим на двух примерах:

 var keyn = "1" var obj = {    [keyn]: "один" } console.log(obj["1"])  //Выведет “один”   ​var keyn = "1" var obj = {    [keyn+"2"]: "двенадцать" } console.log(obj["12"]) //Выведет “двенадцать”

Теперь давайте выведем в консоль некоторые значения в объекте. Делается это при помощи имени объекта и нужного нам ключа через точку:

 var obj = {    car: “машина”,    number: 6,    yes: true,    mas: [1, 2, 3] }  console.log(obj.car); //Выведет “машина” console.log(obj.mas); //Выведет [ 1, 2, 3 ]

Для добавления нового свойства в наш объект используем имя объекта и имя нового ключа, а также не забываем указать значение свойства. Рассмотрим на примере:

 var obj = {    car: “машина”,  } obj.animal = “тигр” console.log(obj.car); //Выведет “машина” console.log(obj.animal); //Выведет “тигр”

Для удаления свойства из нашего объекта используем команду delete:

 var obj = {    car: “машина”,    number: 6,    yes: true,    mas: [1, 2, 3] } delete obj.yes; console.log(obj.yes);  //Выведет undefined 

Создание объектов из функции

В JavaScript есть возможность создавать объекты прямо из функции, используя значения в качестве ее аргументов. Рассмотрим это на примере:

 function makeObj(num) {   return {     num   } } var obj = makeObj(1); console.log(obj.num); //Выведет 1

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

В массивах нет никаких ограничений к именам свойств, то есть мы можем использовать зарезервированные под нужды языка операторы в качестве имени свойства. Например:

 var obj = {    return: 1 } console.log(obj.return) //Выведет 1

Если мы используем число в качестве имени свойства объекта, то оно просто преобразуется в строку, и все будет работать:

 var obj = {    1: 1 } console.log(obj[“1”]) //Выведет 1

Оператор in

Для проверки наличия свойства в объекте используют оператор in. Пример:

 var obj = {    car: "машина",     1: 1 }; console.log("car" in obj); // Выведет true console.log("2" in obj); // Выведет false

Также этот оператор используют для перебора всех значений объекта в цикле. Рассмотрим на примере:

 var obj = {    car: "машина",    number: 6,    yes: true,    mas: [1, 2, 3] } for (let key in obj) {   console.log(obj[key]); //Выведет все значения объекта через строчку } 

Заключение

Мы изучили объекты в JavaScript и научились пользоваться ими. Надеюсь, эта статья оказалась полезной для вас. Удачи!

Межтекстовые Отзывы
Посмотреть все комментарии
guest

Как научиться читать код сайта и зачем это нужно, если вы не программист

Разработка #Браузеры #Веб-дизайн #HTML/CSS Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента...

Как сделать приложение из веб-сайта

Разработка #Плагины #Веб-дизайн #Сервисы #WordPress #Конструктор Разработчики популярных веб-ресурсов стараются сделать все возможное, чтобы клиентам было комфортно потреблять...

10 лучших HTML-редакторов

Разработка #Программы #Редакторы кода #Подборка #HTML/CSS Рассматриваем лучшие приложения для работы с HTML-разметкой. Узнаем, чем пользуется верстальщик с глубокими познаниями...

GitHub включил по умолчанию механизм защиты от утечек данных

Новости #GitHub #Сервисы #Безопасность Реклама. ООО «ТаймВэб». erid: LjN8K4hV8 Сервис GitHub включил защиту от попадания в публичный репозиторий приватных...

Руководство по изучению Python

Разработка #Обзор #Веб-дизайн #Python Язык программирования Python считается одним из наиболее перспективных для написания кода, используемого в различных...

Двумерные массивы в Python и методы работы с ними

Разработка #Разбор #Python Иногда нам приходится использовать таблицы с данными для решения своих задач. Такие таблицы называются матрицами...

Может ли робот обрести сознание? И если обретет, то как мы об этом узнаем?

Разработка #Технологии #Тренды #Нейросети #Наука #Разбор Часть экспертов считает, что люди могут запросто создать разумного робота и понять,...

Платформы для интернет-магазина: какую выбрать?

Разработка #Обзор #Интернет-магазин #Bitrix #OpenCart Введение По статистике за 2016 год 30,5 млн жителей России совершают покупки в...

Строки в Python и методы работы с ними

Разработка #Редакторы кода #Python В одной из прошлых статей я разбирал строки в JavaScript. Теперь пришло время поговорить о...

Создаем свой шаблон для Joomla. Пошаговое руководство

Разработка #Шаблоны #HTML/CSS #Joomla! В этой статье пойдет речь о создании своего шаблона для Joomla 3.х с возможностью...

7 самых популярных фреймворков JavaScript

Разработка #Фреймворки #Обзор #JavaScript Статья посвящена самым популярным фреймворкам, библиотекам и инструментам JavaScript. Каждый из них может значительно облегчить...

Работаем с объектами в JavaScript

Разработка #Настройка #JavaScript В прошлой статье я рассказывал о массивах в JavaScript. Из нее мы можем понять, что...

В Windows 11 добавится поддержка USB 4 2.0 со скоростью передачи данных до 80 Гбит/с

Новости #Обновления #Windows Реклама. ООО «ТаймВэб». erid: LjN8K8PQJ Корпорация Microsoft начала распространять пакет функциональных обновлений KB5034848 для Windows 11...

Что почитать программисту: 10 популярных книг по разработке

Разработка #Подборка #Программы #Веб-дизайн #Наука Какую литературу стоит прочитать программисту, чтобы стать более квалифицированным специалистом и превратиться из...

Как ускорить ответы клиентам с помощью чат-бота в VK. Пошаговая инструкция

Разработка #ВКонтакте #Боты #JavaScript Нередко бывает так, что в вашу группу во «Вконтакте» в один момент написали много...

Как пользоваться редактором Atom

Разработка #GitHub #Редакторы кода #HTML/CSS #PHP Atom – это многофункциональный текстовый редактор от разработчиков GitHub. Он поддерживает огромное...

Что такое язык программирования

Разработка #C/C#/C++ #Программы #Обзор #Веб-дизайн #Java Программа на компьютере или смартфоне – это последовательность команд, которую создавали с...

10 лучших IDE

Разработка #C/C#/C++ #Ubuntu #Java #JavaScript #HTML/CSS #PHP #Python #Windows IDE (Integrated Development Environment) – это интегрированная, единая среда...

Что такое MVC

Разработка #Обзор #Технологии #Веб-дизайн #Программы Рассказываю об одном из самых удобных паттернов построения приложений на любом языке и...

Что такое дополненная реальность

Разработка #Google #Продажи #Технологии #Сервисы Выбирали когда-нибудь кроссовки или диван в интернете? Не очень удобно, верно? Было бы...