JavaScript 基础与页面交互

数组、对象与数据建模

用对象表示一条学习记录,用数组管理多条记录。

难度
入门
预计时间
40 分钟
最近验证
2026/9/21

这一节要完成什么

用对象表示一条学习记录,用数组管理多条记录。

先理解:为什么要学它

用对象表示一条学习记录,用数组管理多条记录。

跟着做

const sessions = [
  { id: 1, topic: 'HTML 结构', minutes: 35, done: true },
  { id: 2, topic: 'CSS Grid', minutes: 45, done: false },
];
const totalMinutes = sessions.reduce((sum, item) => sum + item.minutes, 0);
  1. 打开上一节保留的项目,先运行当前版本并记录结果。
  2. 输入示例并逐行运行,完成:添加两条真实记录,用 map 取主题、filter 取已完成项、reduce 计算总分钟。
  3. 至少改变一个输入,先预测结果,再用浏览器验证。
  4. 故意制造本节典型错误,再根据错误信息修复:不要直接依赖数组位置当永久 id;为每条记录保存稳定 id。

关键代码怎么读

  • 用对象表示一条学习记录,用数组管理多条记录。
  • 代码要按输入、处理、输出三部分阅读;先指出每一部分在哪里。
  • 能运行只是第一步,完成后必须用不同输入验证边界。

常见错误:看到什么,检查什么

现象检查方法
结果与预期不同不要直接依赖数组位置当永久 id;为每条记录保存稳定 id。
刷新后没有变化确认文件已保存、脚本路径正确,并阅读 Console 第一条相关错误。

自己完成一次

添加两条真实记录,用 map 取主题、filter 取已完成项、reduce 计算总分钟。

完成后再看参考答案

完成后应能不用复制示例重新实现,并解释为什么这样处理。关键检查:不要直接依赖数组位置当永久 id;为每条记录保存稳定 id。

完成检查

  • 我完成了本节要求的可见结果
  • 我能解释关键代码的输入、处理和输出
  • 我测试了正常、边界和错误情况

隐私选择

必要存储始终启用。只有在你同意后,才会加载可选的访问统计与支持服务。