Как посчитать сумму элементов массива?

Как посчитать сумму элементов массива

Это базовый вопрос про работу с массивами. Покажу все способы от простого к сложному.

1. Цикл for (классический способ)

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum); // 15

Особенности:

• Самый простой способ понять
• Быстрый и надёжный
• Легко отладить
• Полный контроль

2. forEach метод

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(num => {
  sum += num;
});

console.log(sum); // 15

Особенности:

• Функциональный стиль
• Читаемый код
• Не может вернуть значение
• Немного медленнее чем for

3. reduce метод (ЛУЧШИЙ СПОСОБ)

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => {
  return acc + num;
}, 0);

console.log(sum); // 15

// Или короче
const sum2 = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum2); // 15

Особенности:

• Функциональный подход
• Возвращает значение
• Нет побочных эффектов
• Идеален для трансформаций
• acc - аккумулятор (содержит текущую сумму)
• num - текущий элемент
• 0 - начальное значение аккумулятора

Процесс:

Шаг 1: acc = 0, num = 1 -> 0 + 1 = 1
Шаг 2: acc = 1, num = 2 -> 1 + 2 = 3
Шаг 3: acc = 3, num = 3 -> 3 + 3 = 6
Шаг 4: acc = 6, num = 4 -> 6 + 4 = 10
Шаг 5: acc = 10, num = 5 -> 10 + 5 = 15
Результат: 15

4. Встроенный метод (если бы существовал)

// К сожалению, Math.sum() не существует
// Но можно использовать спред оператор с другими методами

const numbers = [1, 2, 3, 4, 5];
const sum = Math.max(...numbers); // для максимума
// Для суммы нужна свой вычисление

5. Практические примеры

Сумма цен товаров

const items = [
  { name: 'Яблоко', price: 10 },
  { name: 'Банан', price: 5 },
  { name: 'Апельсин', price: 8 }
];

// Способ 1: reduce (ЛУЧШЕ)
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 23

// Способ 2: forEach
let total2 = 0;
items.forEach(item => {
  total2 += item.price;
});
console.log(total2); // 23

Сумма с условием

const numbers = [1, 2, 3, 4, 5, 6];

// Сумма только чётных чисел
const evenSum = numbers.reduce((sum, num) => {
  return num % 2 === 0 ? sum + num : sum;
}, 0);

console.log(evenSum); // 2 + 4 + 6 = 12

// Или с filter
const evenSum2 = numbers
  .filter(num => num % 2 === 0)
  .reduce((sum, num) => sum + num, 0);

console.log(evenSum2); // 12

Вложенные массивы

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Сумма всех элементов
const total = matrix.reduce((sum, row) => {
  return sum + row.reduce((rowSum, num) => rowSum + num, 0);
}, 0);

console.log(total); // 45

Сумма по категориям

const transactions = [
  { category: 'food', amount: 100 },
  { category: 'transport', amount: 50 },
  { category: 'food', amount: 75 },
  { category: 'transport', amount: 30 }
];

// Сумма по категориям
const byCategory = transactions.reduce((acc, trans) => {
  acc[trans.category] = (acc[trans.category] || 0) + trans.amount;
  return acc;
}, {});

console.log(byCategory);
// { food: 175, transport: 80 }

6. TypeScript типизация

// С типами
const numbers: number[] = [1, 2, 3, 4, 5];

const sum: number = numbers.reduce((acc: number, num: number) => {
  return acc + num;
}, 0);

// С интерфейсом
interface Item {
  name: string;
  price: number;
}

const items: Item[] = [
  { name: 'Яблоко', price: 10 },
  { name: 'Банан', price: 5 }
];

const total: number = items.reduce((sum, item) => sum + item.price, 0);

7. Производительность

const numbers = Array.from({ length: 1000000 }, (_, i) => i);

// Способ 1: reduce
console.time('reduce');
const sum1 = numbers.reduce((a, b) => a + b, 0);
console.timeEnd('reduce'); // ~5ms

// Способ 2: forEach
console.time('forEach');
let sum2 = 0;
numbers.forEach(n => sum2 += n);
console.timeEnd('forEach'); // ~6ms

// Способ 3: for
console.time('for');
let sum3 = 0;
for (let i = 0; i < numbers.length; i++) {
  sum3 += numbers[i];
}
console.timeEnd('for'); // ~4ms - БЫСТРЕЕ!

// Способ 4: for...of
console.time('for...of');
let sum4 = 0;
for (const n of numbers) {
  sum4 += n;
}
console.timeEnd('for...of'); // ~5ms

Вывод: for быстрее всех, но разница минимальна. Выбирай читаемость!

8. Реальный пример: React компонент

function ShoppingCart({ items }) {
  // Посчитать сумму товаров
  const total = items.reduce((sum, item) => {
    return sum + (item.price * item.quantity);
  }, 0);

  // Посчитать количество товаров
  const count = items.reduce((sum, item) => sum + item.quantity, 0);

  // Посчитать скидку
  const discount = total > 100 ? total * 0.1 : 0;

  // Итого
  const finalTotal = total - discount;

  return (
    <div>
      <h2>Товары в корзине: {count}</h2>
      <p>Сумма: {total.toFixed(2)}р</p>
      {discount > 0 && <p>Скидка: -{discount.toFixed(2)}р</p>}
      <strong>Итого: {finalTotal.toFixed(2)}р</strong>
    </div>
  );
}

9. Обработка ошибок

// Пустой массив
const empty = [];
const sum1 = empty.reduce((a, b) => a + b, 0);
console.log(sum1); // 0 (без ошибки благодаря начальному значению)

// Без начального значения
const sum2 = empty.reduce((a, b) => a + b);
console.log(sum2); // ОШИБКА: Reduce of empty array with no initial value

// Правильно:
const sum3 = empty.reduce((a, b) => a + b, 0); // 0

// Массив с null/undefined
const mixed = [1, null, 3, undefined, 5];
const sum4 = mixed.reduce((a, b) => a + (b || 0), 0);
console.log(sum4); // 9 (1 + 0 + 3 + 0 + 5)

10. Чеклист при использовании reduce

// ✓ Всегда передавай начальное значение
array.reduce((acc, item) => acc + item, 0); // хорошо
array.reduce((acc, item) => acc + item); // ПЛОХО

// ✓ Проверь типы данных
const items = [{ price: 10 }, { price: 'invalid' }];
const sum = items.reduce((acc, item) => {
  return acc + (typeof item.price === 'number' ? item.price : 0);
}, 0);

// ✓ Используй более простой код если возможно
const sum1 = array.reduce((a, b) => a + b, 0); // просто
const sum2 = array.reduce((acc, num) => acc + num, 0); // тоже просто
const sum3 = array.reduce((accumulator, number) => accumulator + number, 0); // многовато

// ✓ Помни что reduce трансформирует в скалярное значение
const result = array.reduce((acc, item) => {
  acc.sum += item.price;
  acc.count += 1;
  return acc;
}, { sum: 0, count: 0 }); // можно возвращать объект

Итого

Для подсчёта суммы элементов массива:

Быстрый ответ:

const sum = array.reduce((a, b) => a + b, 0);

Для чётных чисел:

const sum = array
  .filter(n => n % 2 === 0)
  .reduce((a, b) => a + b, 0);

Для объектов:

const sum = items.reduce((total, item) => total + item.price, 0);

Рекомендация:

• Используй reduce для чистого функционального стиля
• Используй for если нужна максимальная производительность
• Используй forEach если нужна простота и читаемость
• ВСЕГДА передавай начальное значение в reduce!