«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



В прошлой статье была рассмотрена первая часть темы: типы данных в 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 и рассмотрели основные из них. В дальнейшем мы будем углубляться в эту тему и расширять свои знания.

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Добавил(а): Вадим
Дата: 2023-02-04

Эта тема есть в курсе у Ивана Петриченко. 1 к 1

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 1
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки