介绍
在这个实验中,你将置身于“金融科技谷”繁忙的创业场景中,扮演一位名叫 Alex 的新晋软件工程师。Alex 的任务是为一家快速发展的科技公司增强其财务跟踪系统。该公司的财务团队需要一种动态的方式来查看组织的整体财务状况。你的目标是在他们现有的基于网络的会计应用程序中实现一个功能,该功能能够计算并显示总收入、总支出和净余额,从而提供实时的财务洞察。
知识点:
- Array.prototype.filter()
- Array.prototype.reduce()
在这个实验中,你将置身于“金融科技谷”繁忙的创业场景中,扮演一位名叫 Alex 的新晋软件工程师。Alex 的任务是为一家快速发展的科技公司增强其财务跟踪系统。该公司的财务团队需要一种动态的方式来查看组织的整体财务状况。你的目标是在他们现有的基于网络的会计应用程序中实现一个功能,该功能能够计算并显示总收入、总支出和净余额,从而提供实时的财务洞察。
知识点:
JavaScript 的 Array.prototype.filter()
和 Array.prototype.reduce()
方法是数组操作的强大工具,能够使数据处理更加高效和简洁。这些方法分别用于过滤数组中的元素和累积数组元素的值。
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()
方法对数组中的每个元素执行一个你提供的 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
了解了这两种方法的使用后,下一步是计算你的收入和支出的总和。
在这一步中,你将实现计算总收入、总支出和余额的逻辑。这包括添加 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 函数 updateSummary
从 records
数组中计算总收入和总支出,并更新余额。然后,它会更新汇总部分中相应 HTML 元素的文本内容。
在这个实验中,你踏上了一段探索“金融科技谷”中一家初创公司财务领域的旅程。你扮演了 Alex 的角色,增强了一个基于网络的会计工具,以提供实时的财务摘要。通过集成动态的汇总功能,你让财务团队能够即时了解公司的财务状况,展示了结合 HTML、CSS 和 JavaScript 创建交互式且信息丰富的 Web 应用程序的强大能力。通过这次经历,你学会了如何使用 JavaScript 操作 DOM,并加深了对实际应用开发的理解。