实现财务汇总功能

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在这个实验中,你将置身于“金融科技谷”繁忙的创业场景中,扮演一位名叫 Alex 的新晋软件工程师。Alex 的任务是为一家快速发展的科技公司增强其财务跟踪系统。该公司的财务团队需要一种动态的方式来查看组织的整体财务状况。你的目标是在他们现有的基于网络的会计应用程序中实现一个功能,该功能能够计算并显示总收入、总支出和净余额,从而提供实时的财务洞察。

知识点:

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/ToolsandEnvironmentGroup -.-> javascript/web_storage("`Web Storage`") subgraph Lab Skills javascript/array_methods -.-> lab-290732{{"`实现财务汇总功能`"}} javascript/higher_funcs -.-> lab-290732{{"`实现财务汇总功能`"}} javascript/dom_manip -.-> lab-290732{{"`实现财务汇总功能`"}} javascript/web_storage -.-> lab-290732{{"`实现财务汇总功能`"}} end

Filter 和 Reduce

JavaScript 的 Array.prototype.filter()Array.prototype.reduce() 方法是数组操作的强大工具,能够使数据处理更加高效和简洁。这些方法分别用于过滤数组中的元素和累积数组元素的值。

Filter

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]
Filter 方法示例输出

Reduce

reduce() 方法对数组中的每个元素执行一个你提供的 reducer 函数,最终返回一个单一的输出值。

语法:

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
Reduce 方法示例输出

了解了这两种方法的使用后,下一步是计算你的收入和支出的总和。

实现汇总计算逻辑

在这一步中,你将实现计算总收入、总支出和余额的逻辑。这包括添加 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 并更新 UI 的函数
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

这个 JavaScript 函数 updateSummaryrecords 数组中计算总收入和总支出,并更新余额。然后,它会更新汇总部分中相应 HTML 元素的文本内容。

✨ 查看解决方案并练习

总结

在这个实验中,你踏上了一段探索“金融科技谷”中一家初创公司财务领域的旅程。你扮演了 Alex 的角色,增强了一个基于网络的会计工具,以提供实时的财务摘要。通过集成动态的汇总功能,你让财务团队能够即时了解公司的财务状况,展示了结合 HTML、CSS 和 JavaScript 创建交互式且信息丰富的 Web 应用程序的强大能力。通过这次经历,你学会了如何使用 JavaScript 操作 DOM,并加深了对实际应用开发的理解。

您可能感兴趣的其他 JavaScript 教程