Объекты в JavaScript

Рассмотрим следующий массив:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

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

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

К примеру, если мы хотим вывести на экран название первого дня недели ('пн'), то должны написать в квадратных скобках цифру 0, а не 1.

Логичнее и удобнее было бы все-таки для первого дня недели писать ключ 1, как привыкли мы в жизни.

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

Объекты создаются с помощью фигурных скобок { }, внутри которых пишутся элементы этого объекта в формате ключ: значение.

Давайте сделаем так, чтобы понедельник имел ключ 1, а не ноль, как было раньше, и всем остальным ключам дней прибавим единицу:

let obj = {1: 'пн', 2: 'вт', 3: 'ср', 4: 'чт', 5: 'пт', 6: 'сб', 7: 'вс'};

Теперь можно обратиться к понедельнику уже по ключу 1, а не 0. Сделаем это:

let obj = {1: 'пн', 2: 'вт', 3: 'ср', 4: 'чт', 5: 'пт', 6: 'сб', 7: 'вс'};
console.log(obj[1]); // выведет 'пн'

Создайте объект с ключами 1, 2 и 3 и значениями 'a', 'b' и 'c'. Выведите на экран все его элементы.

Неупорядоченность объектов

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

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

Для примера рассмотрим вот такой объект:

let obj = {1: 'value1', 2: 'value2', 3: 'value3'};

console.log(obj[1]); // выведет 'value1'
console.log(obj[2]); // выведет 'value2'
console.log(obj[3]); // выведет 'value3'

Если переставить элементы этого объекта в произвольном порядке (конечно же, вместе с их ключами), то ничего от этого в работе нашего скрипта не изменится:

let obj = {3: 'value3', 1: 'value1', 2: 'value2'};

console.log(obj[1]); // выведет 'value1'
console.log(obj[2]); // выведет 'value2'
console.log(obj[3]); // выведет 'value3'

Кроме того, числовые ключи не обязательно должны иметь все значения без дырок, подобно массиву. У нас могут быть произвольные числа и это не будет приводить ни к каким проблемам (подобно разреженности у массивов):

// Данный объект корректный:
let obj = {7: 'value1', 50: 'value2', 23: 'value3'};

Вывод всего объекта

Содержимое всего объекта нельзя нормально посмотреть через функцию alert:

let obj = {1: 'a', 2: 'b', 3: 'c'};
alert(obj); // выведет [Object object]

Конечно же, алертом можно вывести каждый отдельный элемент объекта. Но если нужно посмотреть содержимое всего объекта - выводите его в консоль:

let obj = {1: 'a', 2: 'b', 3: 'c'};
console.log(obj); // выведет сам объект

Строковые ключи

В объектах, в отличие от массивов, ключи могут быть не только числовыми, но и строковыми. При этом эти ключи-строки, в отличие от значений-строк, в кавычки брать не нужно:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

А вот, чтобы обратиться к элементу со строковым ключом, в квадратных скобках его уже нужно брать в кавычки:

let obj = {key1: 'a', key2: 'b', key3: 'c'};
console.log(obj['key1']); // выведет 'a'

Создайте объект с ключами a, b и c и значениями 1, 2 и 3. Найдите сумму его элементов.

Ограничение на строковые ключи

Ключами объектов могут быть любые строки. Но есть, однако, ограничение: такие строки не могут начинаться с цифры и не могут содержать внутри себя дефис, пробел и тому подобные вещи.

Такие строки на самом деле являются допустимыми ключами, но только если их взять в кавычки:

let obj = {'1key': 'a', 'key-2': 'b', key3: 'c'};
console.log(obj['1key']);  // выведет 'a'
console.log(obj['key-2']); // выведет 'b'
console.log(obj['key3']);  // выведет 'c'

На самом деле в кавычки можно брать все ключи объекта, но более принято записывать их без кавычек (там, где это можно).

Создайте объект с ключами 1a, 2b и с-с и значениями 1, 2 и 3. Найдите сумму его элементов.

Дан объект:

let obj = {'1a': 1, 'b2': 2, 'с-с': 3, 'd4': 4};

Для каких ключей данного объекта кавычки обязательны, а для каких нет?

Альтернативный синтаксис

Давайте рассмотрим следующий объект:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

Выведем на экран значение какого-нибудь его элемента, например, с ключом key1:

let obj = {key1: 'a', key2: 'b', key3: 'c'};
console.log(obj['key1']);

Как вы уже знаете, для обращение к элементу по ключу мы пишем этот ключ в кавычках внутри квадратных скобок. Существует также альтернативный синтаксис получение значения элемента, вот он:

let obj = {key1: 'a', key2: 'b', key3: 'c'};
console.log(obj.key1); // альтернативный способ

Как вы видите, в данном случае мы пишем после переменной с объектом мы пишем точку и имя ключа без кавычек.

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

Дан объект:

let obj = {key1: 1, key2: 2, key3: 3};

Найдите сумму его элементов. Обращайтесь к элементам с помощью изученного синтаксиса.

Дан объект:

let obj = {'1a': 1, 'b2': 2, 'eee-': 3, 'd4': 4};

К каким элементам этого объекта допустимо обращение через свойство, а к каким - нет?

Практика

Создайте объект user с ключами name, surname, patronymic и какими-то произвольными значениями. Выведите на экран фамилию, имя и отчество через пробел.

Создайте объект date с ключами year, month и day и значениями, соответствующими текущему дню. Выведите созданную дату на экран в формате год-месяц-день.

Заполнение

Объекты заполняются так же, как и массивы:

let obj = {};

obj['key1'] = 'a';
obj['key2'] = 'b';
obj['key3'] = 'c';

console.log(obj); // выведет {key1: 'a', key2: 'b', key3: 'c'}

Можно также использовать альтернативный синтаксис:

let obj = {};

obj.key1 = 'a';
obj.key2 = 'b';
obj.key3 = 'c';

console.log(obj); // выведет {key1: 'a', key2: 'b', key3: 'c'}

Создайте объект с ключами a, b и c и элементами 1, 2 и 3.