52. Коллекции: Практические кейсы

JavaScript: Мозги. Урок: Коллекции: Практические кейсы

В этом уроке мы углубимся в практическое использование коллекций в JavaScript. Мы рассмотрим, как эффективно применять массивы и объекты для решения реальных задач.

Что такое коллекции и зачем они нужны?

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

Массивы

Массивы - это упорядоченные списки элементов.

// Пример массива с именами
const names = ["Alice", "Bob", "Charlie"];

// Доступ к элементу по индексу
console.log(names[0]); // Выводит "Alice"

// Добавление элемента в конец массива
names.push("David");
console.log(names); // Выводит ["Alice", "Bob", "Charlie", "David"]

// Перебор массива
names.forEach(name => {
  console.log(`Привет, ${name}!`);
});

Объекты

Объекты - это коллекции пар ключ-значение.

// Пример объекта, представляющего пользователя
const user = {
  name: "Eva",
  age: 30,
  city: "New York"
};

// Доступ к значению по ключу
console.log(user.name); // Выводит "Eva"

// Добавление нового свойства
user.email = "[email protected]";
console.log(user); // Выводит объект с добавленным email

// Перебор ключей объекта
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

Практические примеры кода

Пример 1: Фильтрация массива объектов

Предположим, у нас есть массив объектов, представляющих товары, и мы хотим отфильтровать только те, у которых цена больше 50.

const products = [
  { name: "Laptop", price: 1200 },
  { name: "Keyboard", price: 75 },
  { name: "Mouse", price: 25 },
  { name: "Monitor", price: 300 }
];

const expensiveProducts = products.filter(product => product.price > 50);

console.log(expensiveProducts);
// Выводит:
// [
//   { name: "Laptop", price: 1200 },
//   { name: "Keyboard", price: 75 },
//   { name: "Monitor", price: 300 }
// ]

Пример 2: Создание списка элементов DOM на основе массива

Допустим, у нас есть массив строк, и мы хотим создать список <li> элементов и добавить их в <ul> элемент на странице.

<ul id="myList"></ul>

<script>
  const items = ["Item 1", "Item 2", "Item 3"];
  const list = document.getElementById("myList");

  items.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    list.appendChild(li);
  });
</script>

Жизненный пример

В React, Vue и Angular коллекции (массивы и объекты) используются повсеместно для управления состоянием компонентов, рендеринга списков данных и обработки пользовательского ввода. Например, в React массив объектов может представлять список задач, и изменение этого массива приводит к перерисовке списка на экране. Объекты часто используются для хранения конфигурационных данных или состояния отдельного компонента. Фреймворки предоставляют удобные методы для работы с коллекциями, такие как map, filter, reduce и другие, упрощая разработку сложных интерфейсов.

Ключевые моменты

• Массивы - упорядоченные списки, полезны для хранения последовательностей данных.
• Объекты - коллекции пар ключ-значение, идеально подходят для представления структурированных данных.
• Методы массивов (forEach, map, filter, reduce) позволяют эффективно манипулировать данными.
• Коллекции широко используются во фреймворках для управления состоянием и рендеринга UI.
• Понимание коллекций - важный навык для любого JavaScript разработчика.

Интерактивный пример