迭代for循环时删除数组/对象的影响及错误修复方案

这绝对是前端开发里容易踩的经典坑，我来给你拆解清楚各种场景的后果，以及怎么修复：

先搞懂for-in的本质 #

首先得明确：for...in是用来遍历对象的可枚举属性（包括原型链上继承来的属性），它的遍历过程是动态的——也就是说，在循环过程中修改被遍历的对象（比如删除属性、修改结构），会直接影响后续的迭代流程。

而你提到的Cow.array如果是数组的话，数组本质也是对象，它的索引（"0"、"1"这类字符串）就是可枚举属性，所以for...in会把这些索引当成属性名来遍历。

两种常见场景的后果 #

1. 循环中删除Cow.array本身 #

比如循环到一半，执行了delete Cow.array或者Cow.array = null：

• 如果是delete Cow.array，那Cow.array会变成undefined，下一次迭代时，代码尝试访问Cow.array[i]就会抛出TypeError: Cannot read properties of undefined。
• 如果是直接把Cow.array设为null，同样会触发类似的报错：TypeError: Cannot read properties of null。
• 极端情况如果连Cow都被删除了（比如delete Cow），那后续迭代访问Cow.array会直接报错ReferenceError: Cow is not defined。

2. 循环中删除Cow.array的元素 #

比如在循环里执行delete Cow.array[i]或者Cow.array.splice(i, 1)：

• 用delete的话，数组的该位置会变成empty（不是undefined），for...in会跳过这个空属性，导致该元素的后续逻辑完全没执行，但循环会继续遍历剩下的索引。
• 用splice删除元素的话，数组后面的元素会前移补位，但for...in是按原始的属性名（索引）遍历，所以会跳过被前移的那个元素的索引，导致遍历不完整（比如原数组是[a,b,c]，删除索引1后数组变成[a,c]，但for...in还会遍历"2"，此时Cow.array[2]是undefined）。

怎么修复这些问题？ #

方案1：遍历副本，彻底隔离原对象的修改 #

最稳妥的方式是先把要遍历的内容复制一份，遍历副本而不是原对象/数组，这样原对象怎么修改都不会影响循环流程：

// 如果是数组，复制元素到新数组
const arrayCopy = [...Cow.array];
for (const element of arrayCopy) {
  // 这里随便修改原Cow.array甚至删除Cow都没关系
  if (someCondition) {
    Cow.array = null;
  }
}

// 如果要遍历数组的索引（对应原for...in的逻辑），可以复制属性名
const arrayKeys = Object.keys(Cow.array);
for (const key of arrayKeys) {
  const element = Cow.array[key];
  // 同样，原数组修改不影响遍历副本的key
}

方案2：改用更适合数组的循环方式 #

for...in本来就不是为数组设计的（会遍历原型链上的额外属性），如果只是遍历数组元素，推荐用这些更靠谱的循环：

• 普通for循环：可以手动控制索引，删除元素时调整索引避免跳过：

  for (let i = 0; i < Cow.array.length; i++) {
    if (!Cow || !Cow.array) break; // 提前做存在性检查
    if (someCondition) {
      Cow.array.splice(i, 1);
      i--; // 删除元素后索引回退，避免跳过下一个元素
    }
  }
  

• for...of循环：ES6+的数组专用遍历方式，简洁且不会遍历原型属性。

方案3：迭代前做存在性检查 #

如果必须用for...in，可以在每次迭代开始前检查Cow和Cow.array是否存在，避免报错：

for (const i in Cow.array) {
  // 每次迭代先确认目标还存在
  if (!Cow || !Cow.array) {
    break;
  }
  // 你的业务逻辑
  if (someCondition) {
    delete Cow.array;
  }
}

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