Метод Reduce
Часть раздела Логика и поток путешествия по JavaScript на Coddy. Урок 54 из 65.
Метод reduce() позволяет «свернуть» массив в одно значение, выполняя переданную функцию для каждого элемента массива. Это единственное значение может быть числом, строкой, объектом или даже другим массивом.
Вот синтаксис reducer:
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// вернуть обновленное значение аккумулятора
}, initialValue);Ключевые компоненты:
- accumulator: Накапливает возвращаемые значения callback-функции (представьте это как промежуточную сумму)
- currentValue: Текущий обрабатываемый элемент в array
- currentIndex: (необязательно) Индекс текущего элемента
- array: (необязательно) Массив, для которого был вызван метод reduce()
- initialValue: (необязательно) Значение, используемое в качестве первого аргумента при первом вызове функции обратного вызова
Например — сумма чисел:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15Как это работает по шагам:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
return acc + curr;
}, 0);
// Вывод:
// Аккумулятор: 0, Текущее значение: 1
// Аккумулятор: 1, Текущее значение: 2
// Аккумулятор: 3, Текущее значение: 3
// Аккумулятор: 6, Текущее значение: 4
// Итоговый результат: 10Задание
ЛегкоСоздайте функцию с именем calculateGroceryTotal, которая принимает массив объектов, представляющих продуктовые товары.
Каждый объект имеет два свойства:
name: строка (название товара)price: число (цена товара)
Функция должна:
- Рассчитать общую стоимость всех товаров
- Применить скидку: если общая сумма превышает 100, применить скидку 10%
- Если общая сумма превышает 50, но меньше или равна 100, применить скидку 5%
- Без скидки для общей суммы 50 или менее.
Вернуть объект, содержащий:
originalTotal: сумма до скидкиdiscount: сэкономленная суммаfinalTotal: итоговая сумма после скидки
Попробуйте сами
function calculateGroceryTotal(items) {
// Напишите код здесь
return {
originalTotal: Math.round(originalTotal * 100) / 100, // Округлить до 2 десятичных знаков
discount: Math.round(discount * 100) / 100,
finalTotal: Math.round(finalTotal * 100) / 100
};
}В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Логика и поток
1Строки в деталях
Основы работы со строкамиИтерация по строкамШаблонные литералыМетоды строкИтоги — String Weaver4JSON Часть 2
Итерация по JSONВложенный JSONОпциональная цепочка JSONПоверхностное и глубокое копированиеПовторение — Магазин велосипедовПовторение — Солнечная система7Система управления библиотекой
Обзор проектаДобавление книг10Управление системой фестиваля
Обзор проектаДобавление фильмов и площадок2Многомерные массивы
Основы 2D массивовДоступ к элементам 2D массиваВложенные циклы и 2D массивыПовторение: 2D массивыСложение и вычитание матрицСтупенчатые массивы3D массивы и далееРаспространенные паттерны 2D массивовПовторение: всё о массивах5Множества. Часть 1
Что такое множество?Итерация по множествамДобавление элементаУдаление элементаПроверка наличия элементаРазмер и проверка на пустотуКопирование и очисткаИтоги — Основы множеств8Интересные темы о массивах
Деструктуризация массивовСинтаксис Spread в массивахРазреженные массивыИтоги — Воркшоп по массивам3JSON. Часть 1
Что такое JSON?Проверка наличия ключаМетоды объектовОператор spread. Часть 1Оператор spread. Часть 2Удаление ключейПовторение: манипуляции с ключами JSON6Множества. Часть 2
Математика — Объединение множествМатематика — Пересечение множествМатематика — Разность множествМатематика — Симметрическая разностьПодмножества и надмножестваПовторение — Группировка друзей9Продвинутые методы массивов
Методы Join и SplitМетод MapМетод FilterМетод ReduceЦепочки методов массивовForEach и Map — это одно и то же?Метод SortМетоды Find и FindIndexИтоги — Мастер цепочекПотренируйтесь самостоятельно: Онлайн-компилятор JavaScript