Массивы объектов — главная структура данных в JS

Список товаров, пользователи, результаты поиска, посты в ленте — почти любые реальные данные в JavaScript представлены как массив объектов. Это самая важная структура, которую вы будете использовать каждый день.

🌐 Массив объектов — это формат реальных данных

Когда ваш сайт запрашивает данные с сервера через API — приходит именно массив объектов. Когда интернет-магазин показывает каталог — это массив объектов. База данных возвращает строки? В JavaScript это массив объектов.

🛠️ Как создать массив объектов

Это просто массив, элементами которого являются объекты. Пишем квадратные скобки, внутри перечисляем объекты через запятую:

// Список студентов
let students = [
  {
    id: 1,
    name: "Анна",
    grade: 95,
    passed: true
  },
  {
    id: 2,
    name: "Борис",
    grade: 72,
    passed: true
  },
  {
    id: 3,
    name: "Вера",
    grade: 58,
    passed: false
  },
  {
    id: 4,
    name: "Глеб",
    grade: 88,
    passed: true
  },
  {
    id: 5,
    name: "Дарья",
    grade: 44,
    passed: false
  }
];

console.log(students.length); // 5 — пятеро студентов

Весь массив — в переменной students. Каждый студент — объект внутри. Структура одинакова: у каждого есть id, name, grade, passed.

🔎 Доступ к элементам и их свойствам

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

let students = [
  { id: 1, name: "Анна", grade: 95 },
  { id: 2, name: "Борис", grade: 72 },
  { id: 3, name: "Вера", grade: 58 }
];

// Получить весь объект по индексу
let firstStudent = students[0];
console.log(firstStudent); // { id: 1, name: "Анна", grade: 95 }

// Получить свойство конкретного объекта
console.log(students[0].name);  // "Анна"
console.log(students[1].grade); // 72
console.log(students[2].id);    // 3

// Последний студент
console.log(students.at(-1).name); // "Вера"

// Изменить свойство конкретного объекта
students[1].grade = 80;
console.log(students[1].grade); // 80

🔁 Перебор массива объектов через for...of

for...of идеально сочетается с массивами объектов — на каждой итерации переменная получает очередной объект:

let students = [
  { name: "Анна", grade: 95 },
  { name: "Борис", grade: 72 },
  { name: "Вера", grade: 58 },
  { name: "Глеб", grade: 88 }
];

// Перебираем — student = каждый объект поочерёдно
for (let student of students) {
  console.log(`${student.name}: ${student.grade} баллов`);
}
// Анна: 95 баллов
// Борис: 72 баллов
// Вера: 58 баллов
// Глеб: 88 баллов

// Посчитать среднюю оценку
let total = 0;
for (let student of students) {
  total += student.grade;
}
let average = total / students.length;
console.log("Средний балл:", average); // 78.25

🔍 Поиск в массиве объектов

Один из самых частых сценариев — найти объект по какому-то условию. Например, найти студента по имени или найти товар по id. Делаем это через цикл:

let students = [
  { id: 1, name: "Анна", grade: 95 },
  { id: 2, name: "Борис", grade: 72 },
  { id: 3, name: "Вера", grade: 58 },
  { id: 4, name: "Глеб", grade: 88 }
];

// Найти студента по имени
function findByName(list, targetName) {
  for (let student of list) {
    if (student.name === targetName) {
      return student; // нашли — возвращаем объект
    }
  }
  return null; // не нашли
}

let found = findByName(students, "Вера");
console.log(found); // { id: 3, name: "Вера", grade: 58 }

let notFound = findByName(students, "Олег");
console.log(notFound); // null

// Найти по id
function findById(list, id) {
  for (let item of list) {
    if (item.id === id) return item;
  }
  return null;
}

console.log(findById(students, 2).name); // "Борис"

✏️ Изменение свойств у найденного объекта

После того как нашли нужный объект — можно изменить его свойства. Объект в JS — это ссылка, поэтому изменение переменной, которая ссылается на объект из массива, меняет и сам массив:

let products = [
  { id: 1, name: "Ноутбук", price: 65000, inStock: true },
  { id: 2, name: "Мышь", price: 1500, inStock: false },
  { id: 3, name: "Монитор", price: 28000, inStock: true }
];

// Обновить цену товара с id = 2
function updatePrice(list, id, newPrice) {
  for (let product of list) {
    if (product.id === id) {
      product.price = newPrice; // меняем свойство объекта в массиве
      return true; // успех
    }
  }
  return false; // не нашли
}

updatePrice(products, 2, 1800);
console.log(products[1]); // { id: 2, name: "Мышь", price: 1800, inStock: false }

// Отметить товар как доступный
for (let product of products) {
  if (!product.inStock) {
    product.inStock = true;
    console.log(`${product.name} теперь в наличии`);
  }
}
// Мышь теперь в наличии

🏆 Практика: найдём самого умного студента

Разберём полноценный пример — список студентов с оценками, нужно найти отличника с наивысшим баллом:

let students = [
  { name: "Анна", grade: 95, city: "Москва" },
  { name: "Борис", grade: 72, city: "Казань" },
  { name: "Вера", grade: 58, city: "Уфа" },
  { name: "Глеб", grade: 88, city: "Москва" },
  { name: "Дарья", grade: 99, city: "Самара" },
  { name: "Егор", grade: 44, city: "Казань" }
];

// Найти студента с наивысшим баллом
function findTopStudent(list) {
  let top = list[0]; // начинаем с первого
  for (let student of list) {
    if (student.grade > top.grade) {
      top = student; // нашли кого-то лучше — обновляем
    }
  }
  return top;
}

let champion = findTopStudent(students);
console.log(`Лучший студент: ${champion.name} (${champion.grade} баллов)`);
// Лучший студент: Дарья (99 баллов)

// Собрать только тех кто сдал (grade >= 60)
function getPassed(list) {
  let passed = [];
  for (let student of list) {
    if (student.grade >= 60) {
      passed.push(student);
    }
  }
  return passed;
}

let passedStudents = getPassed(students);
console.log("Сдали:", passedStudents.length); // 4
for (let s of passedStudents) {
  console.log(`- ${s.name}: ${s.grade}`);
}
// - Анна: 95
// - Борис: 72
// - Глеб: 88
// - Дарья: 99

// Статистика по городам
function countByCity(list) {
  let result = {};
  for (let student of list) {
    if (result[student.city] === undefined) {
      result[student.city] = 0;
    }
    result[student.city]++;
  }
  return result;
}

let stats = countByCity(students);
console.log(stats);
// { Москва: 2, Казань: 2, Уфа: 1, Самара: 1 }

for (let city in stats) {
  console.log(`${city}: ${stats[city]} студентов`);
}

🛒 Ещё пример: работа с корзиной

let cart = [
  { id: 101, name: "Книга по JS", price: 890, qty: 1 },
  { id: 102, name: "Курс по Python", price: 2990, qty: 1 },
  { id: 103, name: "Ноутбук", price: 65000, qty: 1 },
  { id: 104, name: "Мышь беспроводная", price: 1500, qty: 2 }
];

// Сумма заказа
let orderTotal = 0;
for (let item of cart) {
  orderTotal += item.price * item.qty;
}
console.log("Итого:", orderTotal); // 72870

// Найти самый дорогой товар
let mostExpensive = cart[0];
for (let item of cart) {
  if (item.price > mostExpensive.price) {
    mostExpensive = item;
  }
}
console.log("Дороже всего:", mostExpensive.name); // Ноутбук

// Добавить товар в корзину
cart.push({ id: 105, name: "Коврик", price: 800, qty: 3 });
console.log("Позиций в корзине:", cart.length); // 5

// Удалить товар по id
function removeFromCart(items, targetId) {
  for (let i = 0; i < items.length; i++) {
    if (items[i].id === targetId) {
      items.splice(i, 1);
      return true;
    }
  }
  return false;
}

removeFromCart(cart, 104); // убираем мышь
console.log("Позиций после удаления:", cart.length); // 4

✅ Итоги урока

• Массив объектов — главная структура для хранения списков однотипных данных
• Создаётся как обычный массив, где каждый элемент — объект [{}, {}, {}]
• Доступ к свойству: array[index].property
• for...of — перебор: переменная = текущий объект
• Поиск: цикл + условие + return при нахождении, null если не нашли
• Изменение объекта в массиве — через прямое присваивание свойства
• Паттерн «найти максимум»: начать с первого, обновлять при нахождении лучшего