«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на 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 и рассмотрели основные из них. В дальнейшем мы будем углубляться в эту тему и расширять свои знания.



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



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

Комментариев нет...

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

Ваше Имя:

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

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

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


Рунет - Часть 1
Объекты и массивы - Комплексные типы данных
102
Начало работы - Редактор Visual Studio Code - Плагин JShint
131
Способы объявления переменных - Ключевые слова let, const и var
132
Стандарт ES6 - Директива use strict - Строгий режим и стиль кода
77
Простые типы данных – Числа и строки – null и undefined
107
Взаимодействие с пользователем – Методы alert, confirm и prompt
102
Интерполяция и конкатенация – Способы построения строк
167
Основные операторы - Унарный плюс – Сравнение и равенство
78
Инкремент и Декремент - Префиксная и Постфиксная формы записи
53
Работа с системой контроля версий GIT и сервисом GITHub
117
Работа с GitHub на разных компьютерах – Команды git clone и git pull
49
Практика часть 1 – Способы добавления свойств в объект
26
Условия if else - Конструкция switch case - Тернарный оператор
24
Циклы while и for - Операторы break и continue
35
Практика часть 2 – Циклы и Условия
11
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки