使用for...in遍历数组调用replaceRange时CodeMirror报chunkSize未定义错误

我来帮你拆解这几个问题的本质，核心还是你一开始提到的——for...in遍历数组是不良实践，这个坑在这里直接触发了CodeMirror的错误：

1. 为什么"for...in"按钮会抛出chunkSize未定义的错误？ #

当你用for (row in array)遍历数组时，row拿到的是字符串类型的索引（比如"0"、"1"、"2"），不是数字类型。虽然JavaScript在数组索引时会自动把字符串转成数字，但CodeMirror的replaceRange方法对line参数的类型处理没那么宽松：

• CodeMirror内部会根据line值去查找对应的行对象，当传入字符串类型的行号时，它的内部逻辑无法正确匹配到行结构，导致找不到对应的行对象；
• 当尝试访问这个不存在的行对象的chunkSize属性时，自然就抛出了Cannot read property 'chunkSize' of undefined的错误。

更糟的是，如果你的数组（或者全局的Array.prototype）被添加了其他可枚举属性（比如某些第三方库给数组加的扩展方法），for...in还会遍历到这些非索引的属性名（比如"myFunc"），用这些字符串当行号传给replaceRange，肯定找不到对应的行，报错是必然的。

2. 为什么"for...in that works"按钮没有错误？ #

你说这个版本只改了line: row+1，其实是JavaScript的隐式类型转换和CodeMirror的容错机制帮你绕过了问题：

• 当你对字符串类型的row执行row+1时，JavaScript会先尝试把字符串转成数字（比如"0"+1会被解析为数字1，而非字符串"01"——这是因为在对象属性赋值的语境下，引擎会优先做数字转换）；
• 你的数组有3行（索引0、1、2），修改后的line值变成了1、2、3：前两个对应已存在的行，第三个line=3超出了现有行索引，CodeMirror会自动创建新行来容纳内容；
• 就算for...in遍历到了非索引属性（比如"foo"），foo+1转成数字会得到NaN，CodeMirror会把NaN默认处理成最后一行，不会触发找不到行对象的错误，最终结果看起来就正常了。

但要注意：这只是巧合绕过了错误，不是正确的解决方案——for...in的本质问题还是存在，哪天环境变了（比如数组多了其他可枚举属性），错误还是会冒出来。

3. 为什么"forEach"按钮一切正常？ #

forEach是专门为数组遍历设计的方法：

• 它传递给回调的索引是数字类型，CodeMirror可以正确识别并找到对应的行对象；
• 它只会遍历数组的有效数字索引，不会碰那些额外的可枚举属性，逻辑完全符合你的需求，自然不会出错。

总结 #

你遇到的问题就是for...in遍历数组的典型坑：字符串索引、遍历非索引属性。推荐始终用forEach、for...of或者传统的数字索引for循环来遍历数组，避开for...in的这些问题。

内容的提问来源于stack exchange，提问作者digitaltos