Объекты в Javascript

Определение объектов JavaScript

Обычно JavaScript известен как язык Объектно-ориентированного программирования. Соответственно, в JavaScript объекты являются наиболее важными типами данных и формами. Они полностью отличаются от примитивных типов данных в JavaScript. Как уже упоминалось в главе “Типы данных”, в JavaScript существуют семь типов данных, шесть из которых называются “примитивными”, так как их значения включают в себя одну единственную вещь (это может быть число, строка и т.д.).

В отличие от типов данных, мы используем объекты для хранения именованных коллекций различных данных и более сложных сущностей. В JavaScript объекты включены во все аспекты языка, поэтому вам нужно изучить их, как только вы начинаете изучать язык.

Объекты создаются с помощью фигурных скобок {…} и должны иметь список свойств. Свойство известно как “ключ: значение”, в котором ключ или имя свойства представляет собой строку, а значение может быть чем угодно.

Вы можете создать пустой объект, воспользовавшись одним из следующих синтаксисов:

let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax

Как правило, используются фигурные скобки {…}. Эта декларация называется литеральным объектом.

Свойства и литералы

Вы можете моментально ввести свойства в эти скобки в виде пар “ключ: значение”, как это:

сайт имеет одно свойство: имя "name" и значение "W3Docs".

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

Можно использовать любой тип значения. Например:

Оператор delete используется для удаления свойства. Например:

Также можно использовать имена свойств с несколькими словами. Но они должны быть заключены в кавычки, как это:

Завершите последнее свойство из списка запятой:

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

Доступ с использованием точек не работает для свойств с несколькими словами. Вот пример:

// this would give a syntax error
site.teaches JS = true

Точка требует, чтобы ключ был допустимым идентификатором переменной. Это означает отсутствие ограничений, таких как пробелы и т.д.

Вы можете использовать альтернативную запись в квадратных скобках. Это будет работать со любой строкой. Например:

С помощью квадратных скобок можно хранить имя свойства в результате любого выражения, как это:

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

Обратите внимание, что вы не можете использовать запись с точкой аналогичным образом:

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

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

Вот пример:

Вы также можете использовать более сложные выражения в квадратных скобках, как это:

Таким образом, когда имя свойства простое и известное, вы можете использовать точки. А когда вам нужно что-то более сложное, тогда обращайтесь к квадратным скобкам.

Код для значения свойства

В реальном коде часто используются существующие переменные в качестве значений имени свойства.

Вот пример:

function makeCar(name, model) {
  return {
    name, // same as name: name
    model // same as model: model
    // ...
  };
}

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

Цикл “for...in”

Цикл “for...in” loop это особая форма цикла. Он совершенно отличается от for(;;).

Синтаксис выглядит следующим образом:

for (key in object) {
  // executes the body for each key among object properties
}

Давайте посмотрим на пример, где все свойства автомобиля выводятся:

Учтите, что все конструкции “for” дают возможность объявить переменную цикла в цикле. Например, let key в приведенном выше примере. Вместо key также может быть использовано другое имя переменной.

Проверка существования

Одним из наиболее значимых преимуществ объектов является то, что они предоставляют доступ к любому свойству. Ошибки не произойдет, если свойство не существует. Если вы обращаетесь к несуществующему свойству, вам вернется undefined. Это дает уникальную возможность проверять, существует свойство или нет:

Вы также можете использовать уникальный оператор "in" для проверки существования свойства. Чтобы использовать его, воспользуйтесь следующим синтаксисом:

"key" in object

Копирование по ссылке

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

Вы можете назначить/скопировать примитивные значения (строки, числа, булевы значения) как полное значение. Просто посмотрите на этот пример:

В результате у вас будут две независимые переменные; каждая из них будет хранить строку “Welcome to W3Docs!”.

Объекты не работают так.

Переменная будет хранить не объект, а его “адрес в памяти”. Другими словами, она хранит только ссылку на него.

Например:

Где объект находится в памяти, и переменная car содержит ссылку на него. Всякий раз, когда вы копируете переменную объекта, вы дублируете ссылку, но объект не копируется.

Например:

Сравнение по ссылке

В JavaScript два объекта могут считаться равными только в том случае, если они являются одним и тем же объектом.

Например, две переменные равны, когда они ссылаются на один и тот же объект:

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

Объект const

Объект, объявленный как const, может быть изменен. Вот пример:

Вы можете подумать, что (*) вызовет ошибку, но здесь нет ошибки. Вы удивитесь, почему. Причина в том что const может только исправить значение car. Ошибка возникнет только при попытке установить car на что-то другое, как это:

Клонирование и слияние, Object.assign

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

Но что делать, когда вам нужно дублировать объект?

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

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

Object.assign(dest, [src1, src2, src3...])

Он также может быть использован для слияния нескольких объектов:

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