JavaScript 循环

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 使用 for 循环求和
定义一个 sum 函数，使用 for 循环计算数组中所有数字的和。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Define function: sum(value)
Self-check: sum([1,2,3,4,5]) => 15
Self-check: sum([10,20,30]) => 60

2) Beginner Explanation (Current Step)

Step task: 定义一个 sum 函数，使用 for 循环计算数组中所有数字的和。
Define function(s): sum, then verify results with test inputs.
This step has a specific expected result. Focus on making the function return the correct value.
A function is a reusable block of code. Define it first, then call it.
`return` sends a result back. Without return, you usually can't get the function's result.

3) Starter Template (Type along)

function sum(value) {
  return 0;
}
// Self-check: sum([1,2,3,4,5]) should return 15
console.log(sum([1,2,3,4,5]));

4) Rule Validation & Hints

📋 当前任务 - Step 1

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

💡 步骤提示

🔐 学习提示

📖 快速参考

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

About This Exercise

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

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

你将学到：

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

Beginner⏱ 20-25 min

Learning Objectives

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

Scenario

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

Why Do This

Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
Rule-based validation helps you develop a testable frontend mindset.

Hands-on Practice

Write out the event flow in comments first, then implement the functions.
Add an edge case branch for invalid input or empty data.
Explain why each validation rule is needed.

Common Mistakes

Only testing the happy path without verifying edge inputs or repeated clicks.
Mixing event binding and state updates together, making future maintenance difficult.
Console output looks correct but the UI is not actually updated.

Deliverable

A reusable interaction component scaffold (event flow description + key functions + edge case handling).

My Progress

Completed Steps0 / 3

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

Reflection Questions (Recommended)

Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).

What edge case did you add? Why is it easy to miss?

How confident are you with this interaction pattern now?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it