Подсчет общей суммы цен в списке заказов с использованием JavaScript
![Подсчет общей суммы цен в списке заказов с использованием JavaScript](/images/articles/js-sum-orders-total-reduce-function-p1.png)
При работе со списком заказов часто необходимо вычислить общую сумму всех заказов. Это можно легко сделать с помощью JavaScript. В этой статье мы рассмотрим, как использовать метод reduce для суммирования цен всех заказов в списке.
Пример данных
Предположим, есть массив объектов заказов, где каждый объект содержит свойство price.
const orders = [
{ id: 1, item: "Товар 1", price: 100 },
{ id: 2, item: "Товар 2", price: 200 },
{ id: 3, item: "Товар 3", price: 150 },
{ id: 4, item: "Товар 4", price: 250 }
];
Использование метода reduce
Метод reduce позволяет проходить по массиву и аккумулировать значение на каждом шаге итерации. В нашем случае мы будем аккумулировать суммы цен всех заказов.
Пример кода
const totalPrice = orders.reduce((total, order) => {
return total + order.price;
}, 0);
console.log("Общая сумма:", totalPrice); // Output: Общая сумма: 700
Объяснение
- Метод reduce*: Метод *reduce принимает функцию обратного вызова (callback) и начальное значение аккумулятора (в данном случае 0).
- Функция обратного вызова: Функция выполняется для каждого элемента в массиве и принимает два аргумента:
- total: Аккумулятор, который хранит текущую сумму цен.
- order: Текущий объект заказа, который обрабатывается.
- Суммирование цен: Внутри функции обратного вызова мы добавляем цену текущего заказа к аккумулятору total.
- Начальное значение: Начальное значение аккумулятора задается равным 0.
Полный пример кода
Приведем полный код на HTML и JavaScript для ясности.
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подсчет общей суммы цен</title>
</head>
<body>
<script>
const orders = [
{ id: 1, item: "Товар 1", price: 100 },
{ id: 2, item: "Товар 2", price: 200 },
{ id: 3, item: "Товар 3", price: 150 },
{ id: 4, item: "Товар 4", price: 250 }
];
const totalPrice = orders.reduce((total, order) => {
return total + order.price;
}, 0);
console.log("Общая сумма:", totalPrice); // Output: Общая сумма: 700
</script>
</body>
</html>
Заключение
Использование метода reduce - это эффективный и лаконичный способ суммирования цен всех заказов в массиве. Этот подход можно применять к любому массиву объектов, когда требуется вычислить сумму какого-либо свойства. Понимание работы метода reduce позволит вам более эффективно работать с данными в JavaScript.
-
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.