介绍
在这个实验中，我们将继续跟随 Alex，了解他们在一家科技初创公司担任 Web 开发员的旅程。场景发生在开发团队的工作区，Alex 的任务是通过添加处理多个财务记录的功能来增强个人财务追踪器。这一关键功能要求 Alex 深入研究 JavaScript 的数组和对象，将每个财务记录作为对象存储在数组中。目标是创建一个动态且交互式的应用程序，不仅能够追踪，还能高效地组织用户的财务数据。通过这一努力，Alex 旨在为用户提供清晰的财务活动概览，从而使应用程序更加实用和吸引人。
在本实验中，我们需要通过操作数组和对象来存储财务记录。重点是理解如何使用数组存储对象以及如何向数组中添加新元素。
知识点：
- 数组操作（创建、遍历、添加元素）
- 对象（创建对象、访问和设置属性）
函数
本实验将包含一些基本的 JavaScript 代码片段，以帮助你理解相关概念。你可以在浏览器控制台或 Node.js 环境中运行这些代码片段。
- 在网页上右键点击并选择“检查”或按下
F12打开浏览器控制台。 - 在终端中运行
node命令以打开 Node.js 环境。
函数
在 JavaScript 中，函数是一段用于执行任务或计算值的代码块。函数使用 function 关键字定义：
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // output: "Hello, Alice!"
在这里，greet 函数接收一个参数 name 并返回一条问候语。
箭头函数
箭头函数是 ES6 引入的一种更简洁的函数书写方式。它们特别适用于匿名函数表达式：
const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // output: "Hello, Bob!"
箭头函数会自动绑定当前上下文的 this 值，这对于回调函数和方法链式调用非常有用。
数组操作
在 JavaScript 中，数组是一种用于存储多个值的对象。
创建数组
let fruits = ["Apple", "Orange", "Cherry"];
JavaScript 数组是零索引的：数组的第一个元素位于索引 0，第二个元素位于索引 1，依此类推 —— 最后一个元素位于数组长度属性值减 1 的位置。
每个索引对应一个唯一的数组元素。
那么我们如何读取数组中的元素呢？
遍历数组
使用 forEach 方法遍历数组。
forEach 方法接收一个回调函数，该函数有两个参数：value 和 index。
例如，记录 fruits 数组中的每个元素：
fruits.forEach(function (value, index) {
console.log(index, value);
});
添加元素
使用 push 方法向数组末尾添加一个元素。
例如，让我们向 fruits 数组中添加一个葡萄。
fruits.push("Grape");
console.log(fruits);
对象
对象是 JavaScript 中的基本构建块，用于存储键值对。
创建对象
let person = {
name: "Alice",
age: 30
};
访问和设置属性
你可以使用点号（.）或方括号（[]）访问对象属性：
console.log(person.name); // 使用点号访问属性
person["age"] = 31; // 使用方括号设置属性
console.log(person.age);
了解了数组和对象的基本用法后，让我们开始优化项目的代码。
创建和存储财务记录
在这一步中，你将与 Alex 一起创建一个结构，用于将财务记录作为对象存储在数组中。这个设置将成为财务追踪器数据管理系统的核心，允许动态更新和操作财务记录。
首先，让我们定义财务记录的结构。每条记录将包含描述、金额和类型（收入或支出）。打开你的 script.js 文件，首先创建一个数组来存储这些记录：
let records = [];
接下来，创建一个函数来向数组中添加新记录。每条记录将是一个对象：
const addRecord = (description, amount, type) => {
records.push({ description, amount, type });
};
你还不能在页面上看到任何内容，因为我们还没有完成监听提交事件的函数。
在 ~/project/script.js 中定义 form.addEventListener("submit", (e) => {})，以监听点击“添加”按钮时的交互。
// 监听表单提交事件以添加新记录
form.addEventListener("submit", (e) => {
e.preventDefault();
const description = document.getElementById("description").value;
const amount = document.getElementById("amount").value;
const type = document.getElementById("type").value;
addRecord(description, amount, type);
});
preventDefault()是 Event 接口的方法，它告诉用户代理，如果事件没有被显式处理，则不应像通常那样执行默认操作。value是 HTMLDataElement 接口的属性，返回反映 value HTML 属性的字符串。
此时，如果你在 addRecord 函数中添加 console.log(records);，你可以看到添加到记录中的数据将被记录到 records 中。
如果我们想要显示添加到分类账中的记录，我们需要创建 renderRecords 函数，但在那之前，我们需要学习模板字符串。
模板字符串
模板字符串使用反引号（`）定义，可以包含 ${expression} 形式的占位符，其中 expression 可以是任何有效的 JavaScript 表达式。
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出：Hello, Alice!
变量插值
模板字符串可以方便地将变量值嵌入到字符串中，简化动态字符串信息的构建。
let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // 输出：She is 25 years old.
处理多行字符串
在传统的 JavaScript 中，处理多行字符串通常需要使用反斜杠或字符串拼接。模板字符串提供了一种更简洁的方式来处理多行文本。
let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);
显示财务记录
现在 Alex 已经设置好了存储财务记录的方式，下一步是将这些记录动态显示在网页上。你将学习如何遍历财务记录数组，并将每条记录显示为财务追踪器用户界面的一部分。
然后，在 script.js 中创建一个函数来渲染这些记录：
const renderRecords = () => {
recordsList.innerHTML = "";
records.forEach((record, index) => {
const recordElement = document.createElement("div");
recordElement.classList.add("record-item");
recordElement.innerHTML = `
${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
`;
recordsList.appendChild(recordElement);
});
};
在添加测试记录后，调用 renderRecords 以在页面上显示它们：
renderRecords();
该函数遍历 financialRecords 数组，为每条记录创建一个新的段落，并将其附加到网页上的指定容器中。
总结
在本实验中，你跟随 Alex 迈出了重要的一步，使个人财务追踪器成为一个功能强大的应用程序。通过学习使用数组和对象，你使应用程序能够动态存储和显示多条财务记录。这不仅增强了应用程序的功能，还让你掌握了在 JavaScript 中管理复杂数据结构的关键技能，这是 Web 开发中的一项重要能力。
通过这次实践，你看到了数组和对象如何协同工作，以有意义的方式组织和操作数据。这些基础知识为未来的开发旅程奠定了基础，例如添加交互性和数据持久性。
