HTML换装小游戏Reset按钮：forEach有效for循环无效原因解析

一、forEach能生效但for循环不行的原因 #

• 大概率是你写的for循环没正确访问数组里的单个元素。比如错误写法可能是这样：

for (let i = 0; i < dropAreas.length; i++) {
  dropAreas.dropped = null; // 错误：操作的是数组本身，不是单个元素
}

• 正确的for循环要通过索引定位到每个元素：

for (let i = 0; i < dropAreas.length; i++) {
  dropAreas[i].dropped = null; // 操作数组第i个元素的dropped属性
}

• 而你之前生效的forEach应该是用了回调函数的参数（每个数组元素），比如dropAreas.forEach(item => item.dropped = null)，所以能正确修改每个元素的属性。

二、你替换的forEach代码无效的原因 #

• 这段代码的问题在于：你操作的是整个dropAreas数组的dropped属性，而非数组里的每个元素。
• 看你的代码：

dropAreas.forEach(resetCanvas => {
  dropAreas.dropped = null; // 给数组本身添加了dropped属性并设为null
  console.log(dropAreas.dropped)
})

• 控制台输出的4个null，是数组自身的dropped属性值，不是每个dropArea元素的。数组里的元素dropped属性根本没被修改，所以画布上的服饰不会移除。
• 正确写法要使用forEach回调的参数（每个元素）：

dropAreas.forEach(item => {
  item.dropped = null; // 修改每个元素的dropped属性
  console.log(item.dropped)
})

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