Метод reduce() в JavaScript: Изменение, агрегация и трансформация массивов

🔗 Метод reduce() представляет собой универсальное средство для работы с массивами в JavaScript. С его помощью можно эффективно свести массив к одному значению, последовательно применяя функцию к элементам.

Аргументы:

callback (обязательный): Функция, которая будет применяться к элементам массива. Принимает четыре аргумента:

• Аккумулятор (accumulator): Значение, которое накапливает результат после каждой итерации. Изначально равно начальному значению или первому элементу массива, если начальное значение не указано.
• Текущий элемент (currentValue): Текущий обрабатываемый элемент массива.
• Индекс элемента (index) — Необязательный аргумент: Индекс текущего элемента в массиве.
• Исходный массив (array) — Необязательный аргумент: Ссылка на исходный массив.

initialValue (необязательный): Начальное значение аккумулятора. Если этот аргумент не указан, первый элемент массива будет использован в качестве начального значения аккумулятора.

Примеры использования метода reduce() в JavaScript:

// Пример 1: Суммирование чисел в массиве
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// Результат: sum = 15

// Пример 2: Конкатенация строк из массива
const strings = ["Hello", " ", "world", "!"];
const concatenatedString = strings.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});
// Результат: concatenatedString = "Hello world!"

// Пример 3: Преобразование в объект с использованием аргумента array
const emojis = ["😀", "🍉", "🌼"];
const emojiInfo = emojis.reduce((accumulator, emoji, index, array) => {
  accumulator[`emoji${index}`] = { emoji, position: index, totalEmojis: array.length };
  return accumulator;
}, {});
// Результат: emojiInfo = { emoji0: { emoji: "😀", position: 0, totalEmojis: 3 }, ... }

// Пример 4: Создание нового массива на основе исходного массива
const numbers = [1, 2, 3, 4, 5];
const doubledAndSquared = numbers.reduce((accumulator, currentValue) => {
  const doubled = currentValue * 2;
  const squared = doubled * doubled;
  accumulator.push(squared);
  return accumulator;
}, []);
// Результат: doubledAndSquared = [4, 16, 36, 64, 100]

Использование метода reduce() в React.js

В этом примере мы рассмотрим, как с использованием метода reduce() можно удобно подсчитать общую стоимость товаров в корзине и вывести эту информацию на экран.

Допустим, у нас есть массив объектов, представляющих товары в корзине покупателя. Каждый объект содержит информацию о товаре, такую как название и цена. Наша задача — подсчитать общую сумму всех покупок в корзине и отобразить ее на экране.

Применение метода reduce() позволяет нам эффективно агрегировать данные и предоставлять пользователям информацию о стоимости их покупок в интернет-магазинах 🛒

import React from 'react';

const ShoppingCart = () => {
  // Массив объектов с товарами в корзине
  const cartItems = [
    { id: 1, name: 'Smartphone', price: 499.99 },
    { id: 2, name: 'Headphones', price: 99.99 },
    { id: 3, name: 'Charging Cable', price: 9.99 }
  ];

  // Используем метод reduce() для подсчета общей суммы
  const totalAmount = cartItems.reduce((total, item) => total + item.price, 0);

  return (
    <div>
      <h1>Your Shopping Cart</h1>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
          </li>
        ))}
      </ul>
      <h2>Total: ${totalAmount.toFixed(2)}</h2>
    </div>
  );
};

export default ShoppingCart;

Что у нас в итоге получилось:

В этом простом примере мы используем метод reduce() для подсчета общей суммы всех товаров в корзине. Мы также используем метод map() для отображения списка товаров и их цен. Общая сумма выводится внизу списка с округлением до двух знаков после запятой.