两种JS for循环输出差异：为何一个是数字一个是字符串？

我正在学习在线JavaScript课程，目前接触到两种for循环：for (let i = 0; i < students.length; i++) 和 for (let i in students)。运行下方代码后，第一种循环输出1-8的学员编号，第二种却输出01、11、21这类形式，移除+1后两者输出一致，请问这是为什么？

"use strict"

const students= ["Melanie","Leni","Matilda","Niels","Anke","Juergen","Lilli","Hans"]

console.log("=========================================")
console.log("Variante 1\n")

for (let i = 0; i < students.length; i++) {
  console.log(`Teilnehmer ${i+1} Name lautet: ${students[i]}`)
}

console.log("\n=========================================")
console.log("Variante 2\n")
for (let i in students) {
      console.log(`Teilnehmer ${i+1} Name lautet: ${students[i]}`)
}

我原本预期两段代码输出一致，移除+1后输出才相同。

核心原因是两种循环中变量i的数据类型完全不同：

• 普通for循环里的i是数字类型：i从0开始以数字形式递增，i+1执行的是数字加法运算，所以0+1=1、1+1=2……最终输出1到8的正常编号。
• for...in循环里的i是字符串类型：数组的索引在for...in中会被当作字符串返回（比如"0"、"1"、"2"……），此时i+1会触发字符串拼接逻辑，把字符串和数字1连在一起，就出现了"0"+1="01"、"1"+1="11"这类输出。

当你移除+1时，普通for循环输出的数字0-7会在模板字符串中自动转为字符串，和for...in输出的"0"-"7"看起来完全一致，所以两者输出相同。

额外提醒：for...in并不适合遍历数组，它会遍历数组所有可枚举属性（包括原型链上的非索引属性），如果数组额外添加了自定义属性，也会被遍历到。遍历数组更推荐使用普通for循环、for...of或者数组的forEach方法。

内容的提问来源于stack exchange，提问作者Niels von Daake