JavaScript 循环

✏️ 可编辑

加载编辑器...

实时预览

⌘+Enter 运行⌘+R 重置

当前步骤Step 1/3

已解锁步骤1/3

下一步建议

先完成当前 Step 1

1) 当前任务与操作步骤

当前任务：Step 1 - 使用 for 循环求和
定义一个 sum 函数，使用 for 循环计算数组中所有数字的和。

先在 `script.js` 完成当前 Step 的代码。
点击“运行验证”看规则是否通过。
当前 Step 通过后，下一步会自动解锁。
你当前需要先通过 Step 1，才会解锁 Step 2。

本步交付物（按这个检查）

定义函数：sum(value)
自检目标：sum([1,2,3,4,5]) => 15
自检目标：sum([10,20,30]) => 60

2) 零基础解释（当前 Step）

本步任务：定义一个 sum 函数，使用 for 循环计算数组中所有数字的和。
你要先定义函数：sum，再用测试输入验证返回结果。
本步有明确目标结果，核心是让函数返回值与期望一致。
函数就是“可重复执行的一段小程序”，先定义，再调用。
`return` 是把结果“交还”出去，没有 return 通常拿不到函数结果。

3) 可直接照着敲的最小模板

function sum(value) {
  return 0;
}
// 自检：sum([1,2,3,4,5]) 应返回 15
console.log(sum([1,2,3,4,5]));

4) 规则校验与提示

📋 当前任务 - Step 1

定义 sum 函数
sum([1,2,3,4,5]) 返回 15
sum([10,20,30]) 返回 60

💡 步骤提示

🔐 学习提示

📖 快速参考

map 返回一个新数组，forEach 没有返回值。需要转换数据用 map，只需遍历用 forEach。

关于此练习

循环就是“重复执行同一段代码”。

新手最容易卡在“什么时候用 for，什么时候用 map”。这关会用 3 个任务讲清楚。

你将学到：

使用 for 循环遍历
使用 while 循环
数组方法：forEach、map
累加器模式

入门⏱ 20-25 min

学习目标

理解循环的概念和用途
掌握 for 循环语法
学会使用 forEach 和 map
理解累加器模式

场景说明

你在处理一组数据：先求和，再遍历输出，最后做批量转换。这就是循环最常见的三个用途。

为什么这么做

前端 JS 不是“会写语法”就够，重点是能稳定地改 DOM 和处理交互状态。
先拆事件流（触发 -> 处理 -> 更新 UI），再写代码，错误率会明显下降。
通过规则验证能帮助你建立“可测试”的前端思维。

动手练习

先用注释写出事件流，再实现函数。
补一个“异常输入”或“空数据”分支。
解释每条验证规则为什么需要。

常见误区

只关注功能跑通，不验证边界输入和重复点击场景。
事件绑定和状态更新写在一起，后续难维护。
console 看起来对，但 UI 没有真实更新。

本节交付物

一份可复用的交互组件脚手架（事件流说明 + 关键函数 + 边界处理）。

我的进度

完成步骤0 / 3

总尝试次数0

最佳分数0%

达标标准（可勾选）

完成当前 Lab 前建议确认

当前步骤规则全部通过代码可复述并能说明每行作用能举出一个真实业务里的应用场景

反思题（建议完成）

请用 2-3 句话说明本 Lab 的事件流（触发 -> 处理 -> 更新）。

你补了哪个边界场景？为什么这个场景容易漏？

你现在对这个交互模式的掌握程度？

还不稳，需要更多练习能独立完成类似任务可以教别人做