Объекты on JSFlow

Объекты: основы

Mon, 01 Jan 0001 00:00:00 +0000

Объекты: основы #

Объект в JavaScript — составное значение: набор пар «ключ — значение», где ключ — строка или Symbol, а значение — любой тип данных. Объекты описывают сущности предметной области: корзину покупок, профиль пользователя, элемент плейлиста или тело HTTP-запроса.

Литерал объекта #

Самый частый способ создать объект — литерал в фигурных скобках:

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 items: [],
 updatedAt: null,
}

Ключи без кавычек — это идентификаторы; значения разделяются запятыми. Последняя запятая после последнего свойства допустима (trailing comma).

Копирование и ссылки

Mon, 01 Jan 0001 00:00:00 +0000

Копирование и ссылки #

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

Ссылка и мутация #

const cartA = { id: 'cart-7a2', total: 1490 }
const cartB = cartA

cartB.total = 0
cartA.total // 0 — изменился тот же объект

Сравнение объектов через === проверяет идентичность ссылки, а не равенство содержимого:

const left = { sku: 'kb-01' }
const right = { sku: 'kb-01' }

left === right // false — разные объекты
left === left // true

Поверхностное копирование #

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

Методы и this

Mon, 01 Jan 0001 00:00:00 +0000

Методы и this #

Метод — свойство объекта, значением которого служит функция. При вызове через точку или скобки this внутри метода указывает на объект, через который произошёл вызов. Понимание this критично для методов корзины, плейлиста и любых объектов с поведением, а не только с данными.

Метод в литерале объекта #

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 items: [],

 addItem(product, qty = 1) {
 this.items.push({ sku: product.sku, qty, price: product.price })
 return this
 },

 itemCount() {
 return this.items.reduce((sum, line) => sum + line.qty, 0)
 },
}

cart.addItem({ sku: 'kb-01', price: 1490 }, 2)
cart.itemCount() // 2

Сокращённая запись addItem() { } эквивалентна addItem: function() { } — для методов это предпочтительный синтаксис.

Конструкторы и new

Mon, 01 Jan 0001 00:00:00 +0000

Конструкторы и new #

Конструктор — функция, вызываемая с new, которая создаёт и инициализирует новый объект. Внутри такой функции this ссылается на свежий экземпляр. Паттерн предшествует синтаксису class и по-прежнему встречается в legacy-коде и встроенных типах (Date, Map, Error).

Вызов с new #

function Cart(id, currency = 'RUB') {
 this.id = id
 this.currency = currency
 this.items = []
 this.updatedAt = null
}

const cart = new Cart('cart-7a2')
cart.id // "cart-7a2"
cart.items // []

Оператор new выполняет примерно следующее:

Создаёт пустой объект и связывает его с prototype функции-конструктора.
Вызывает функцию с this, указывающим на этот объект.
Если функция не вернула собственный объект, возвращает созданный экземпляр.

Без new обычный вызов конструктора в strict mode бросит ошибку или испортит глобальные привязки — всегда используйте new с функциями-конструкторами.

Опциональная цепочка ?.

Mon, 01 Jan 0001 00:00:00 +0000

Опциональная цепочка ?. #

Опциональная цепочка (?.) прерывает обращение к свойству, методу или элементу массива, если значение слева — null или undefined. Вместо TypeError выражение даёт undefined. Оператор незаменим при разборе вложенных API payload и частично заполненных профилей пользователя.

Доступ к свойству #

const apiPayload = {
 event: 'cart.viewed',
 data: {
 cart: { id: 'cart-7a2', totals: { subtotal: 1490 } },
 },
}

const discount = apiPayload.data?.cart?.totals?.discount
// undefined — discount в payload нет, ошибки нет

Без ?. цепочка apiPayload.data.cart.totals.discount упала бы, если бы отсутствовал любой промежуточный уровень.

Symbol и перечисление ключей

Mon, 01 Jan 0001 00:00:00 +0000

Symbol и перечисление ключей #

Ключи объекта в JavaScript почти всегда строки; Symbol даёт гарантированно уникальный идентификатор. Методы Object.keys, values и entries перечисляют собственные перечисляемые свойства — это основа сериализации, валидации форм и обхода payload без захвата унаследованных полей из прототипа (подробнее — см. раздел ООП).

Object.keys, values, entries #

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 itemCount: 2,
}

Object.keys(cart)
// ['id', 'currency', 'itemCount']

Object.values(cart)
// ['cart-7a2', 'RUB', 2]

Object.entries(cart)
// [['id', 'cart-7a2'], ['currency', 'RUB'], ['itemCount', 2]]

entries удобен для преобразования объекта в Map или для итерации пар ключ–значение: