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

Разработка
#Настройка
#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