Name	Name	Last commit message	Last commit date
parent directory ..
css	css
js	js
README.md	README.md
index.html	index.html

03 Loop：循环与数据遍历

这是 javascript-development-lab 的第 03 个独立最小实验。

本章只解决一个核心问题：当同一段逻辑需要针对多条数据重复执行时，JavaScript 如何使用循环？

1. 本章学习目标

理解并实际观察：

for
while
for...of
循环变量
循环条件
array.length
数组索引
重复执行代码的基本思路

本章暂时不使用 map()、filter()、forEach() 等数组方法，这些会放到后面的数组章节中单独研究。

2. 实验内容

页面包含三个最小实验：

使用 for 遍历产品数组，并显示产品序号。
使用 for...of 直接读取数组中的每一个产品。
使用 while 连续生成 1～5 五个数字。

产品数据保持简单：

const products = [
  { name: 'WPC 地板', category: 'Decking', price: 29 },
  { name: 'WPC 墙板', category: 'Wall Panel', price: 35 },
  { name: 'WPC 栅栏', category: 'Fence', price: 42 }
];

这里的对象知识暂时只作为数据载体使用，第 07 章会专门研究 Object。

3. 核心知识

for

适合明确知道遍历次数，或者需要使用索引 i 的场景。

基本结构：

for (开始; 条件; 每轮变化) {
  // 重复执行
}

需要重点观察三个部分：

从哪里开始？
什么情况下继续？
每执行一次以后如何变化？

for...of

适合直接读取数组中的每一个值。

它不强调索引，而强调“当前这一项是什么”。

while

只要条件为 true，就会继续执行。

因此必须特别注意：循环内部要让条件最终能够变成 false，否则可能产生死循环。

4. 数据如何流动

本章最重要的数据链路：

products 数组
↓
循环逐条读取
↓
生成 HTML 字符串
↓
innerHTML
↓
浏览器显示产品列表

这里第一次比较清楚地看到“多条数据如何批量生成页面内容”。

5. 建议修改实验

打开 js/app.js，依次做下面几个修改并刷新浏览器观察结果：

实验 1

给 products 再增加一个产品，观察 for 和 for...of 是否会自动多显示一条。

实验 2

把：

let i = 0

改成：

let i = 1

观察第一条数据发生什么变化，并思考数组索引为什么通常从 0 开始。

实验 3

把：

count < 5

改成：

count < 10

观察 while 的执行次数。

实验 4

暂时注释掉：

count++;

不要长期运行这个版本。思考为什么它可能形成无限循环，然后恢复代码。

6. for 和 for...of 如何选择

初学阶段可以先记住：

需要索引 i
→ for

只想拿到数组中的每一项
→ for...of

后面学习 map / filter / find / reduce 后，再比较不同遍历方式各自适合的场景。

7. 本章不要过度扩展

本章重点不是制作复杂产品列表，而是理解循环。

暂时不要加入：

搜索
筛选
排序
点击事件
表单
localStorage
API

这些能力会在后面的实验中逐步加入。

8. 文件结构

03-loop/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

9. 本章完成后应该掌握

看到下面这样的需求时：

“我有 10 条产品数据，需要把相同的 HTML 结构重复生成 10 次。”

应该首先想到：

数组
+
循环

而不是手工复制 10 份 HTML。

下一章：04 Function：函数、参数与返回值。

FilesExpand file tree

03-loop

Directory actions

More options