Реализация сводки

Введение

В этом лабораторном задании, которое происходит в оживленной среде стартапов "FinTech Valley", вы будете играть роль Алекса, начинающего программиста, которому поручено улучшить систему отслеживания финансов для быстро растущего технологического компании. Финансовая команда компании нуждается в динамическом способе просмотра общего финансового состояния организации. Ваша задача - реализовать функцию в их существующем веб-приложении для бухгалтерского учета, которая вычисляет и отображает общую выручку, общие расходы и чистый баланс, предоставляя реальные финансовые аналитические сведения.

Точки знания:

• Array.prototype.filter()
• Array.prototype.reduce()

Фильтрация и свёртка

Методы Array.prototype.filter() и Array.prototype.reduce() в JavaScript являются мощными инструментами для манипуляции массивами, которые делают обработку данных более эффективной и компактной. Эти методы используются для фильтрации элементов в массиве и для накопления значений элементов массива соответственно.

Фильтрация

Метод filter() создает новый массив, содержащий все элементы, которые проходят тест, реализованный в предоставленной функции. Он не изменяет исходный массив, а возвращает новый массив.

Синтаксис:

let result = array.filter(function (element, index, array) {
  // Тестовое условие
  return true; // или false
});

• element: Текущий элемент, обрабатываемый в массиве.
• index (необязательный): Индекс текущего элемента.
• array (необязательный): Массив, по которому вызывается filter.

Например, фильтрация чисел, больших 10.

let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
  return number > 10;
});
console.log(filtered); // Вывод: [12, 130, 44]

Свёртка

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

Синтаксис:

let result = array.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  // Возвращайте накопленный результат
  return accumulator + currentValue;
}, initialValue);

• accumulator: Накапливает возвращаемые значения обратного вызова; это накопленное значение, которое было ранее возвращено в последнем вызове обратного вызова, или initialValue, если оно предоставлено.
• currentValue: Текущий элемент, обрабатываемый в массиве.
• currentIndex (необязательный): Индекс текущего обрабатываемого элемента.
• array (необязательный): Массив, по которому вызывается reduce.

Например, вычисление суммы всех чисел в массиве.

let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
}, 0);
console.log(total); // Вывод: 199

Взяв эти два метода в расчёт, следующим шагом будет вычисление общей суммы ваших доходов и расходов.

Реализация логики суммирования

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

Напишите следующее в script.js:

document.addEventListener("DOMContentLoaded", function () {
  const updateSummary = () => {
    const totalIncome = records
      .filter((record) => record.type === "income")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const totalExpense = records
      .filter((record) => record.type === "expense")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const balance = totalIncome - totalExpense;

    totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
    totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
    balanceEl.textContent = `Balance: ${balance}`;
  };

  // Функция для сохранения записей в localStorage и обновления интерфейса пользователя
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

Эта JavaScript-функция, updateSummary, вычисляет общую выручку и расходы из массива записей и обновляет баланс. Затем она обновляет текстовое содержимое соответствующих HTML-элементов в разделе сводки.

Резюме

В этом лабораторном задании вы отправились в путешествие по финансовому миру стартап-компании в "FinTech Valley". Вы играли роль Алекса, улучшая веб-приложение для бухгалтерского учета, чтобы обеспечить实时финансовые сводки. Интегрируя динамическую функцию сводки, вы позволили финансовой команде получить мгновенные аналитические сведения о финансовом состоянии компании, демонстрируя силу комбинации HTML, CSS и JavaScript для создания интерактивных и информативных веб-приложений. С помощью этого опыта вы узнали, как манипулировать DOM с использованием JavaScript, и улучшили свое понимание разработки реальных приложений.