JavaScript循环四侠传：for...of、for...in、map、forEach谁是你的菜？

🤔 先问大家一个问题： #

当你看到数组[1,2,3]时，脑子里第一个蹦出来的遍历方式是啥？ （评论区告诉我，看看有没有同道中人👀）

🎭 循环四大家族登场 #

今天咱们要唠唠JavaScript界的"F4"——for…of、for…in、map、forEach，它们看似都能遍历数据，实则各怀绝技，性格迥异！

👨‍👩‍👧‍👦 共同点：都是遍历小能手 #

1. 都能用来循环迭代（说人话：一个一个数过去）
2. 都支持break/continue（除了forEach这个犟脾气）
3. 都能访问到当前元素（具体怎么访问各有千秋）

💡 差异大起底（建议收藏） #

1. for…in：对象属性的"八卦记者" #

const obj = { name: '小明', age: 18 }
for (const key in obj)
  console.log(key) // 输出：name, age

特点：

• 专门遍历对象的键名（像查户口一样把属性全抖出来）
• 会遍历原型链上的属性（容易挖到别人家祖坟）
• 数组慎用！可能会把数组的length也算进去

💡 江湖称号："对象遍历专业户"，但遍历数组就是跨界抢饭碗

2. for…of：数组元素的"专属导游" #

const arr = ['🍎', '🍐', '🍊']
for (const fruit of arr)
  console.log(fruit) // 输出：🍎, 🍐, 🍊

特点：

• 专门遍历数组/字符串/Map等可迭代对象（持证上岗，专业对口）
• 直接拿到元素值（不用arr[i]这么麻烦）
• 支持break和continue（灵活变通）

💡 现代前端新宠，数组遍历就找它，比for循环优雅10倍！

3. forEach：数组的"老干部" #

[1, 2, 3].forEach((num, index) => {
  console.log(num * 2) // 输出：2,4,6
})

特点：

• 数组专属，无法中途退出（像老黄牛一样埋头干到完）
• 没有返回值（默默奉献型人格）
• 第三个参数是原数组（时刻不忘本）

💡 经典名言："我可以遍历，但别想改变我！"（不会修改原数组）

4. map：数组的"魔术师" #

const newArr = [1, 2, 3].map(num => num * 2)
console.log(newArr) // 输出：[2,4,6]

特点：

• 返回新数组（原数组毫发无损）
• 必须return（不return就出不了魔法效果）
• 适合数据转换（把1变成2，把🐱变成🐶）

💡 职场定位："数据加工厂厂长"，输入原料输出新产品

📊 四侠能力对比表 #

🚦 实战场景选择题 #

1. 遍历对象属性 →for…in
2. 遍历数组且可能中途退出 →for…of
3. 单纯遍历数组做操作 →forEach
4. 数组转新数组 →map

🧩 趣味记忆法 #

• for…in：像查字典，先看到页码（键名）再找内容
• for…of：像读小说，一页一页按顺序看（值）
• forEach：像做广播体操，每个动作都做到位但不创新
• map：像拍照修图，原图不变，输出美颜版

💬 互动话题 #

你曾经因为用错循环踩过哪些坑？评论区分享你的"血泪史"