DevGang
Авторизоваться

Тип данных Object в JavaScript

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

Object

object - ссылочный тип данных, является то самостоятельной единицей, имеющей свойства и определённый тип.

У объекта есть свойства которые с ним ассоциируется. Свойство объекта можно понимать как переменные закрепленные за ним.

Для того чтобы создать объект у нас есть несколько способов.

Конструктор класса

// Вызов конструктора класса Object
let objectExample_1 = new Object();

// Далее наполняем его данными

objectExample_1.name = 'John';
objectExample_1.age = 22;

В примере выше мы создали внутри объекта свойства name и age и записали в них данные.

Литерал

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

let objectExample_2 = {}

// наполнение объекта данными

objectExample_2.name = 'Alice';
objectExample_2.age = 30;

console.log(objectExample_2)

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

let objectExample_3 = {
    name: 'Vladimir',
    age: 25
}

console.log(objectExample_3)

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

let user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    gender: 'male'
}

Допустим я хочу получить имя данного пользователя.

console.log(user);
console.log(user.firstName);

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

console.log(user.lastName);
console.log(user.age);
console.log(user.gender);

Синтаксис квадратных скобок - []

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

let student = {
    firstName: 'John',
    ['last name']: 'Dou',           // Имя свойства содержащее пробел
    ['student-' + 'age']: 30,       // Вычисляемое имя свойства
}

console.log(student);

Получить значения этих свойств у нас просто так не получится. Если мы будем использовать синтаксис точки '.' то получим ошибку. Вместо этого будем использовать квадратные скобки [ ].

console.log(student.firstName)              // Обычный способ
console.log(student['last name'])
console.log(student['student-age'])

Готово, теперь все работает!

Вложенные объекты

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

const deepObject = {
    name: 'Mazda',
    model: '#1',
    owner: {
        firstName: 'John',
        lastNam: 'Doe',
        age: 12
    }
}

console.log(deepObject)

Это простой пример, на самом деле вложенность может быть очень большой, важно понимать что так можно делать.

Array

array - массив данных, а также итерируемый объект, также относится к типу данных object. Ключи для элементов массива создаются автоматически и являются индексами, позицией элемента внутри массива.

Индексирование массива начинается с нуля.

const arr = ['John', 'Alice', 'Andrew', 'Antony'];

console.log(arr)

У массива есть длинна (length), это свойство содержит количество элементов массива.

console.log(arr.length);

Берем элементы по их индексу.

console.log(
    arr[0], arr[1], arr[2], arr[3]
)

Если мы хотим гарантировано получить значение последнего элемента в массиве.

console.log(
    arr[arr.length - 1]
)

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

Функции

Функции - это участки кода которые можно переиспользовать, в этом уроке мы не будем их рассматривать подробно.

Для создания функции существует несколько способов ключевое слово function и стрелочный синтаксис.

function foo(a, b) {
    return a + b;
}

const bar = (a, b) => {
    return a - b;
}

console.log(foo);
console.log(bar);

Функции также являются объектами и относятся к типу данных object.

* * *

Файлы с урока

P.S. Подпишись на мой youtube и telegram канал чтобы регулярно получать новый контент.

Источники:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть