Объекты в массивах: типовой формат данных

Один из самых популярных форматов данных в JavaScript - массив объектов. Так обычно хранят списки: товары, пользователи, задачи, статьи. Каждый элемент - объект с одинаковым набором полей.

1) Пример типовых данных

const products = [
  { id: 1, title: "Notebook", price: 1000, inStock: true },
  { id: 2, title: "Mouse", price: 30, inStock: false },
  { id: 3, title: "Keyboard", price: 80, inStock: true }
];

Массив - это список, объект - описание одного элемента списка.

2) Чтение и обращение к полям

const products = [
  { id: 1, title: "Notebook", price: 1000 },
  { id: 2, title: "Mouse", price: 30 }
];

console.log(products[0].title); // "Notebook"
console.log(products[1].price); // 30

3) Поиск элемента по условию: find

Найти один объект:

const products = [
  { id: 1, title: "Notebook" },
  { id: 2, title: "Mouse" }
];

const item = products.find(p => p.id === 2);

console.log(item); // { id: 2, title: "Mouse" }

Если не найдено - undefined.

4) Отбор элементов: filter

Отобрать объекты, которые подходят по условию:

const products = [
  { id: 1, title: "Notebook", inStock: true },
  { id: 2, title: "Mouse", inStock: false },
  { id: 3, title: "Keyboard", inStock: true }
];

const available = products.filter(p => p.inStock);

console.log(available);
// [{ id: 1, ... }, { id: 3, ... }]

5) Преобразование: map

Сделать новый массив значений (например, список названий):

const products = [
  { id: 1, title: "Notebook" },
  { id: 2, title: "Mouse" }
];

const titles = products.map(p => p.title);

console.log(titles); // ["Notebook", "Mouse"]

Создать новый массив объектов с дополнительным полем:

const products = [
  { id: 1, title: "Notebook", price: 1000 },
  { id: 2, title: "Mouse", price: 30 }
];

const withTax = products.map(p => ({
  ...p,
  priceWithTax: Math.round(p.price * 1.2)
}));

console.log(withTax);

6) Подсчет и группировки: reduce

Сумма цен:

const products = [
  { id: 1, price: 1000 },
  { id: 2, price: 30 },
  { id: 3, price: 80 }
];

const total = products.reduce((acc, p) => acc + p.price, 0);

console.log(total); // 1110

Объект-счетчик по полю:

const orders = [
  { id: 1, status: "new" },
  { id: 2, status: "done" },
  { id: 3, status: "new" }
];

const counts = orders.reduce((acc, o) => {
  acc[o.status] = (acc[o.status] || 0) + 1;
  return acc;
}, {});

console.log(counts); // { new: 2, done: 1 }

7) Обновление элемента: “без мутации”

Иногда нужно обновить один объект по id. Вариант, который обычно проще контролировать - создать новый массив через map.

const products = [
  { id: 1, title: "Notebook", inStock: true },
  { id: 2, title: "Mouse", inStock: false }
];

const updated = products.map(p => {
  if (p.id !== 2) return p;
  return { ...p, inStock: true };
});

console.log(updated);

Важно: исходный массив при этом не меняется.

8) Удаление элемента: filter

Удалить элемент по id:

const products = [
  { id: 1, title: "Notebook" },
  { id: 2, title: "Mouse" }
];

const withoutMouse = products.filter(p => p.id !== 2);

console.log(withoutMouse); // [{ id: 1, title: "Notebook" }]

9) Сортировка по полю

Сортировка обычно мутирует, поэтому часто делают копию:

const products = [
  { id: 1, price: 1000 },
  { id: 2, price: 30 },
  { id: 3, price: 80 }
];

const sortedByPrice = products
  .slice()
  .sort((a, b) => a.price - b.price);

console.log(sortedByPrice);

Частые ошибки

1) Ожидание, что includes найдет объект “по содержимому”

includes проверяет ссылку. Два одинаковых объекта - не одно и то же значение.

const a = { id: 1 };
const list = [a];

console.log(list.includes({ id: 1 })); // false
console.log(list.includes(a)); // true

Для поиска по полю обычно используют find.

2) Случайная мутация объекта внутри массива

const products = [{ id: 1, title: "Notebook" }];
const item = products[0];

item.title = "Changed";

console.log(products[0].title); // "Changed"

Если нужен новый объект, делают копию:

const products = [{ id: 1, title: "Notebook" }];

const itemCopy = { ...products[0], title: "Changed" };

console.log(products[0].title); // "Notebook"
console.log(itemCopy.title);    // "Changed"

Что стоит запомнить

• Массив объектов - типовой формат для списков данных.
• find - найти один элемент, filter - отобрать несколько, map - преобразовать, reduce - собрать итог.
• Для обновления одного элемента удобно использовать map и копию объекта через spread.
• Сортировка sort мутирует, поэтому часто используют slice() перед sort.