Далее на странице...
В прошлой статье была рассмотрена первая часть темы: типы данных в JavaScript и речь шла о простых типах данных.
Здесь мы продолжим эту тему и поговорим об объектах в JavaScript.
Объект - это комплексный тип данных, потому что может содержать различные типы данных. Объект - это коллекция данных - структура, которая используется для хранения любых данных.
Объекты в JavaScript делятся на две категории: обычные и специальные объекты.
Специальные объекты
Специальные объекты в JavaScript это:
-
Массивы []
-
Функции function
-
Объект Даты
-
Регулярные выражения
-
Ошибки
Все специальные объекты будут рассмотрены позже. Дополнительно информацию о них можно найти в других разделах сайта (см. верхнее навигационное меню).
Далее речь пойдет об обычных объектах.
Создание объекта
Для создания объекта используются фигурные скобки.
Пример 1.1
const obj = {
};
В переменную obj мы поместили пустой объект.
Объект может содержать: данные, которые называются свойствами объекта и действия, которые называются методами объекта. Рассмотрим пример.
Допустим объект - это какой-то человек, у которого есть имя, возраст и социальный статус.
Пример 1.2
const obj = {
name: 'John',
age: 22,
isMarried: false
};
name, age и isMarried - это свойства объекта obj, которые имеют значения, относящиеся к различным типам данных: 'John' - строка, 22 - число и false - логический тип данных.
С действиями, которые может совершать человек, то есть с методами объекта мы будем знакомиться позже.
А сейчас остановимся на свойствах объекта.
Доступ к значениям свойств объекта
Как получить доступ к значениям свойств объекта в JavaScript?
Сделать это можно двумя способами: через точку или через квадратные скобки.
Обращение к значению свойства объекта через точку
Пример 2.1
const obj = {
name: 'John',
age: 22,
isMarried: false
};
console.log(obj.name);
Результат
John
Итак, как происходит обращение к значению свойства объекта: сначала указывается переменная, содержащая объект, затем после точки свойство объекта. В нашем случае мы обратились к значению John --> свойства name --> объекта obj.
Обращение к значению свойства объекта через квадратные скобки
Мы получим тот же результат, что и в примере 2.1, используя квадратные скобки.
Но здесь есть нюанс.
Пример 2.2
Если сделать так, то мы получим undefined - то, что существует, но не имеет значения.
const obj = {
name: 'John',
age: 22,
isMarried: false
};
console.log(obj[name]);
Результат
undefined
Здесь действует следующее правило: свойство объекта должно быть заключено в кавычки. Смотрите пример ниже.
Пример 2.3
const obj = {
name: 'John',
age: 22,
isMarried: false
};
console.log(obj["name"]);
Результат
John
Мы получили верный результат, но...
Плагин JShint во вкладке PROBLEMS редактора VScode рекомендует делать это через точку - как в примере 2.1.
"['name'] is better written in dot notation. (W069)"
Рассмотренные примеры различного обращения к значениям свойств объекта требуют дополнительного внимания, но этому будет посвящена отдельная статья/тема.
Сейчас мы только познакомились с объектами и на этом этапе нужно понять следующее: объекты - это ключевая единица языка JavaScript и они используются для хранения больших объемов информации.
Массивы - Комплексный тип данных
Массивы используются для хранения данных, которые идут строго по порядку. Рассмотрим, как это выглядит.
Допустим мы храним на сервере несколько файлов-изображений. Занесем их в массив.
-
создается переменная, которой присваивается массив;
-
массив обозначается квадратными скобками;
-
строковые элементы массива заключены в кавычки и следуют друг за другом через запятую;
-
каждый элемент массива имеет порядковый номер.
Пример 3.1
let arr = ['plum.png', 'orange.jpg', 'apple.bmp'];
В массив можно поместить любой тип данных, например, число, объект или другой массив. При этом кавычки уже не нужны.
Пример 3.2
let arr = ['plum.png', 'orange.jpg', 7, 'apple.bmp', { }, [1, 2]];
Таким образом массивы, как и объекты - это комплексный тип данных, который может содержать в себе любые типы данных.
Доступ к элементам массива
Как обратиться к элементам массива?
Делается это через квадратные скобки:
-
сначала указывается имя массива;
-
затем в квадратных скобках указывается порядковый номер элемента массива, к которому мы хотим обратиться.
Стоит отметить и запомнить, что нумерация элементов массива начинается с нуля 0.
Пример 3.3
let arr = ['plum.png', 'orange.jpg', 7, 'apple.bmp', {}, [1, 2]];
console.log(arr[0], arr[2]);
Результат
plum.png 7
Массив - Частный случай объекта
На собеседовании часто спрашивают: является ли массив отдельным типом данных?
Ответ - НЕТ.
Массив - это частный случай объекта/его разновидность. Смотрите иллюстрацию классификации типов данных.
Наглядно покажем, что массив - это частный случай объекта, а не отдельный тип данных.
Для этого вернемся к примеру 2.2, то есть к объекту и его структуре.
Свойства объекта записываются в формате ключ --> значение: ключ - это свойства объекта и далее после двоеточия указывается значение этого свойства. Таким образом свойства и их значения как-то описывают объект.
Теперь посмотрим на массив из примера 3.1. С первого взгляда может показаться, что его структура отлична от структуры объекта, так как мы видим только хранящиеся в нем данные/значения - элементы массива.
Но если учитывать тот факт, что у каждого элемента массива есть свой порядковый номер, то оказывается, что структура массива напоминает структуру объекта.
Пример 3.4
/* 0 1 2 */
let arr = ['plum.png', 'orange.jpg', 'apple.bmp'];
В массиве также есть пара ключ --> значение: это номер элемента массива и его значение. Поэтому массив - это частный случай объекта.
На этой странице и в прошлой статье мы узнали, какие типы данных бывают в JavaScript и рассмотрели основные из них. В дальнейшем мы будем углубляться в эту тему и расширять свои знания.
Дата: 2023-02-04
Эта тема есть в курсе у Ивана Петриченко. 1 к 1