for...of 与 for...in
for 和 while 要你自己管计数器。很多时候数据已经是列表或对象——你要的是每个值或每个键，不是自制下标。for...of 给出可迭代对象的下一个值。for...in 给出对象上的下一个键。还是「重复做事」这一家；循环变量里装的东西不同。
for...of 做什么？
对可迭代对象里的每个值执行一次循环体。入门最常见的是数组和字符串。写成 for (const item of list)——每一轮 item 就是下一个值。除非你故意要下标循环，否则不必写 i < list.length。
for...of、for...in 与经典循环
📊 日常遍历形态
| 形态 | 循环变量里是什么 | 日常适用 |
|---|---|---|
for...of |
可迭代对象里的一个值 | 数组里每个水果；字符串里每个字符 |
for...in |
对象上的一个键（属性名） | 普通对象上的每个字段名 |
经典 for |
你控制的下标 | 需要数字 0、1、2… 时 |
while |
你在循环体里更新的内容 | 只要一条规则成立就继续 |
学 for...of 先从数组入手。故事是「这个对象上的每个属性名」时再用 for...in。下标本身重要时保留经典 for。
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
遍历数组里的值
每一轮打印一个字符串：先是 red，再是 green，再是 blue。循环变量就是值本身——不是 0、1、2。只要条目时，for...of 比自己管下标更短。
const word = "hi";
for (const ch of word) {
console.log(ch);
}
遍历字符串里的字符
字符串也可迭代。先打印 h，再打印 i。把每个字符当作一个值——在学更重的字符串 API 之前，适合简单的逐字处理。
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
用 for...in 遍历键
这里 key 先是 "name"，再是 "role"。用 user[key] 读值。普通对象的可枚举键优先用 for...in。不要把它当读数组值的第一工具——那是 for...of 的事。
记住短规则：of → 值，in → 键。搞混二者是入门经典坑。
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
用值拼出一条消息
每一轮追加一个字母和一个连字符。循环结束后 slice 去掉末尾连字符，于是看到 A-B-C。与前面循环课相同的拼接思路——现在直接按值走。
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
何时下标循环仍然有帮助
经典 for 既打印下标也打印值。for...of 只打印值。需要位置编号？保留带下标的 for。只要条目？优先 for...of。
在页面上显示 for...of
用 for...of 遍历数组，拼出短行，写进页面。
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
页面显示 list=tea milk honey。改数组里一项，刷新，读新行。值用 for...of，对象键用 for...in，下标重要时用经典 for。下一课用 break 与 continue 在中途驾驭循环。
自己试试
- 用
for...of打印["a", "b", "c"]的每个值。 - 用
for...of打印"ok"的每个字符。 - 对
{ x: 1, y: 2 }用for...in打印key=value。 - 用
for...of把["1", "2", "3"]拼成1-2-3。 - 写一个带下标的
for，并排打印下标与值。 - 在 HTML 演示里只改数组，刷新，读
list=。
常见错误
- 想要数组值却写成
for...in（应为for...of） - 对普通对象用
for...of（入门阶段那样不可迭代） - 指望
for...of给出0、1、2——它给值，不给下标 for...in之后忘了user[key]，需要值时却只打了键- 明明清晰的
for...of更好读，却写很长的下标循环
小结
for...of遍历可迭代对象的值（数组、字符串）for...in遍历对象的键- 需要下标数字时，经典
for仍然合适 - 一条持续条件时，
while仍然合适 - 在循环体里拼接值来组消息
- 下一课：break 与 continue——停下或跳过一轮
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部