Объекты JavaScript

Введение

Добро пожаловать в лабораторию по JavaScript Объектам. Объекты являются фундаментальными строительными блоками в JavaScript, используемыми для хранения коллекций связанных данных и более сложных сущностей. Они состоят из пар ключ-значение, где ключи являются строками (или Symbols), а значениями могут быть любые типы данных, включая другие объекты или функции.

В этой лаборатории вы научитесь:

• Создавать JavaScript объект с использованием синтаксиса литерала объекта.
• Добавлять свойства (пары ключ-значение) к объекту.
• Получать доступ и обновлять значения свойств объекта.
• Добавлять новые свойства к существующему объекту.

Всю работу вы будете выполнять в файле script.js. Чтобы увидеть вывод вашего кода, вам нужно будет открыть консоль разработчика браузера. Вы можете сделать это, перейдя на вкладку Web 8080 и открыв инструменты разработчика (обычно щелкнув правой кнопкой мыши и выбрав "Inspect", затем нажав на вкладку "Console").

Начнем!

Создайте литерал объекта с помощью фигурных скобок

На этом шаге вы создадите свой первый JavaScript объект. Самый простой способ создать объект — использовать синтаксис литерала объекта, который представляет собой пару фигурных скобок {}.

Сначала найдите файл script.js в файловом проводнике слева от вашего WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Теперь добавьте следующий код в script.js, чтобы объявить константную переменную с именем car и присвоить ей пустой объект. Мы также будем использовать console.log() для вывода объекта в консоль, чтобы проверить его создание.

const car = {};

console.log(car);

После добавления кода сохраните файл. Чтобы увидеть результат, щелкните на вкладке Web 8080. Откройте консоль разработчика (щелкните правой кнопкой мыши -> Inspect -> Console). В консоли вы должны увидеть пустой объект {}.

Добавьте пары ключ-значение в объект

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

На этом шаге вы добавите свойства к объекту car непосредственно внутри фигурных скобок во время его создания. Давайте определим некоторые свойства для нашего автомобиля: марку, модель и год выпуска.

Измените код в script.js следующим образом:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

Здесь make, model и year — это ключи, а 'Toyota', 'Camry' и 2021 — их соответствующие значения. Обратите внимание, что строковые значения заключены в одинарные кавычки.

Сохраните файл и снова проверьте консоль разработчика на вкладке Web 8080. Теперь вы увидите объект, выведенный с его свойствами.

Доступ к свойству через точечную нотацию

После того как у вас есть объект со свойствами, вам часто потребуется получить значение конкретного свойства. Самый распространенный способ сделать это — использовать точечную нотацию (.). Синтаксис: имяОбъекта.имяСвойства.

На этом шаге вы получите доступ к свойству model объекта car и выведете его в консоль.

Добавьте следующую строку в конец файла script.js. Ваш существующий код должен остаться.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// Доступ к свойству model и его вывод
console.log(car.model);

Сохраните файл и обновите вкладку Web 8080. В консоли разработчика теперь вы увидите две строки вывода: полный объект car, за которым следует строка Camry.

Обновление присвоенного значения свойства

Данные в объекте не являются фиксированными. Вы можете легко изменить значение существующего свойства, используя оператор присваивания (=). Это делается так же, как вы бы присвоили значение обычной переменной.

На этом шаге давайте обновим year нашего car с 2021 на 2022.

Добавьте следующие строки в конец файла script.js. Мы обновим свойство, а затем снова выведем весь объект в консоль, чтобы увидеть изменения.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// Обновление свойства year
car.year = 2022;

console.log(car);

Для наглядности вы можете удалить предыдущие операторы console.log, но это не обязательно. После сохранения файла проверьте консоль на вкладке Web 8080. Вывод теперь покажет объект car с обновленным значением year на 2022.

Добавление нового свойства к существующему объекту

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

На этом заключительном шаге вы добавите новое свойство color к объекту car.

Добавьте следующие строки в конец файла script.js. Это добавит новое свойство, а затем выведет объект в консоль для подтверждения добавления.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// Добавление нового свойства color
car.color = "blue";

console.log(car);

Сохраните файл и в последний раз проверьте консоль разработчика. Объект car теперь будет отображаться с четырьмя свойствами: make, model, year и недавно добавленным color.

Резюме

Поздравляем с завершением лабораторной работы по JavaScript Объектам! Вы успешно освоили основные операции для работы с одной из важнейших структур данных в JavaScript.

В этой лабораторной работе вы практиковались в:

• Создании объекта с использованием литерального синтаксиса ({}).
• Заполнении объекта начальными парами ключ-значение.
• Доступе к значениям свойств с использованием точечной нотации (object.property).
• Обновлении значения существующего свойства.
• Добавлении нового свойства в динамический объект.

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