数组和对象

JavaScriptJavaScriptBeginner
立即练习

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

介绍

在这个实验中,我们将继续跟随 Alex,了解他们在一家科技初创公司担任 Web 开发员的旅程。场景发生在开发团队的工作区,Alex 的任务是通过添加处理多个财务记录的功能来增强个人财务追踪器。这一关键功能要求 Alex 深入研究 JavaScript 的数组和对象,将每个财务记录作为对象存储在数组中。目标是创建一个动态且交互式的应用程序,不仅能够追踪,还能高效地组织用户的财务数据。通过这一努力,Alex 旨在为用户提供清晰的财务活动概览,从而使应用程序更加实用和吸引人。

在本实验中,我们需要通过操作数组和对象来存储财务记录。重点是理解如何使用数组存储对象以及如何向数组中添加新元素。

知识点

  • 数组操作(创建、遍历、添加元素)
  • 对象(创建对象、访问和设置属性)

函数

本实验将包含一些基本的 JavaScript 代码片段,以帮助你理解相关概念。你可以在浏览器控制台或 Node.js 环境中运行这些代码片段。

  1. 在网页上右键点击并选择“检查”或按下 F12 打开浏览器控制台。
  2. 在终端中运行 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 方法接收一个回调函数,该函数有两个参数:valueindex

例如,记录 fruits 数组中的每个元素:

fruits.forEach(function (value, index) {
  console.log(index, value);
});
使用 forEach 遍历数组

添加元素

使用 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);
JavaScript 对象属性示例

了解了数组和对象的基本用法后,让我们开始优化项目的代码。

创建和存储财务记录

在这一步中,你将与 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 开发中的一项重要能力。

通过这次实践,你看到了数组和对象如何协同工作,以有意义的方式组织和操作数据。这些基础知识为未来的开发旅程奠定了基础,例如添加交互性和数据持久性。

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