Объекты в Javascript

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

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

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

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

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

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

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

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

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

Javascript create object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; console.log(site);

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

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

Javascript get property values of the object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; // get property values of the object: console.log(site.name); // W3Docs

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

Javascript object add a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; site.haveAdmin = true; console.log(site);

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

Javascript object delete a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" haveAdmin: true }; delete site.name; console.log(site);

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

Javascript object multiword a property

let user = { site: "W3Docs", "teaches JS": true // multiword property name must be quoted }; console.log(user);

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

Javascript objects

let site = { name: "W3Docs", haveAdmin: true, } console.log(site);

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

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

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

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

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

Javascript objects with square bracket

let site = {}; // set site["teaches JS"] = true; // get console.log(site["teaches JS"]); // true // delete delete site["teaches JS"]; console.log(site);

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

Javascript objects

let site = {}; let key = "teaches JS"; // same as site["teaches JS"] = true; site[key] = true; console.log(site);

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

Javascript object properties

let site = { name: "W3Docs", }; let key = prompt("What do you want to know about the site?", "name"); console.log(site[key]); // If enter "name", you will see W3Docs

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

Javascript objects can’t use the dot notation

let site = { name: "W3Docs" }; let key = "name"; console.log(site.key) // undefined

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

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

Вот пример:

Javascript the object's property name is taken from the variable

let car = prompt("Which car do you like?", "bmw"); let color = { [car]: "white", // the property's name is taken from the variable car }; console.log(color.bmw); // white, if car="bmw"

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

Javascript object's more complicated expressions in square brackets

let car = 'bmw'; let carColor = { [car + 'Color']: 'white' // carColor.bmwColor = 'white' }; console.log(carColor.bmwColor); // white

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

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

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

Вот пример:

Javascript object's property name values

function makeCar(name, model) { return { name: name, model: model, // ...other properties }; } let car = makeCar("BMW", "M5"); console.log(car.name); // BMW

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

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

Javascript objects

let car = { name, // same as name:name model: "M5" }; console.log(car);

Цикл “for...in”

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

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

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

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

Javascript objects for in loop

let car = { name: "Mercedes", model: "C-Class Cabriolet", toDrive: true }; for (let key in car) { // keys console.log(key); // name, model, toDrive // values for the keys console.log(car[key]); // Mercedes, C-Class Cabriolet, true }

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

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

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

Javascript objects property is undefined

let car = {}; console.log(car.noSuchProperty === undefined); // true means "no such property"

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

"key" in object

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

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

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

Javascript primitive copy by value

let message = "Welcome to W3Docs!"; let phrase = message; console.log(phrase);

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

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

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

Например:

Javascript object

let car = { name: "BMW" }; console.log(car);

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

Например:

Javascript copy an object variable by reference

let car = { name: "BMW" }; let sportCar = car; // copy the reference console.log(sportCar);

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

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

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

Javascript objects comparing

let obj1 = {}; let obj2 = obj1; // copy the reference console.log(obj1 == obj2); // true, both variables reference the same object console.log(obj1 === obj2); // true

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

Javascript objects comparing

let obj1 = {}; let obj2 = {}; // two independent objects console.log(obj1 == obj2); // false

Объект const

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

Javascript const objects

const car = { name: "BMW" }; car.model = "M5"; // (*) console.log(car.model); // M5

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

Javascript const objects

const car = { name: "BMW" }; // Error (can't reassign car) car = { name: "Mercedes" }; console.log(car);

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

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

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

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

Javascript objects clone

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

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

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

Javascript objects merging

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

Время Викторины: Проверьте Свои Навыки!

отовы проверить свои знания? Погрузитесь в наши интерактивные викторины для более глубокого понимания и веселого способа закрепить знания.