p5.js中for循环中途终止问题排查及数组清空方案咨询

先说说你原来的代码为什么会中途停止 #

你的deleteClouds函数用了正向for循环遍历数组，每次调用splice删除元素时，数组长度会实时缩短，且被删除元素后的所有元素会往前移动一位。举个实际场景的例子：
假设theClouds初始长度是3，对应索引0、1、2的三个元素：

• 第一次循环u=0，删除索引0的元素，数组变成[原索引1元素, 原索引2元素]，长度变为2
• 循环变量u递增到1，此时数组长度是2，u=1对应现在的第二个元素（原索引2的元素），删除后数组长度变为1
• u再递增到2，此时u < theClouds.length（2 < 1）不成立，循环直接结束，原索引1的元素就被遗留了下来

所以每次循环只能删除一半左右的元素，必须多次触发按钮才能删完所有内容。

再看你提出的简化写法：theClouds = [] #

答案是绝大多数场景下完全可以达到清空效果，而且这是最简洁高效的写法。不过有个细节需要注意：

• 如果theClouds是全局变量，或者在当前函数作用域内是直接可访问的变量，赋值后theClouds会直接指向一个新的空数组，原来的数组如果没有其他引用的话会被JavaScript的垃圾回收机制处理。
• 但如果有其他代码还持有原theClouds数组的引用（比如把它赋值给了另一个变量），那原数组不会被清空，只是theClouds这个变量指向了新的空数组。如果你的需求就是让theClouds本身变成空数组，那这个写法完全没问题。

补充几种其他清空数组的方式（如果需要保持原数组引用的话） #

如果你需要修改原数组本身而不是重新赋值（比如其他地方依赖这个数组的引用），可以用这些方法：

1. 修改数组长度（最简洁的原地修改方式）：

theClouds.length = 0;

2. 循环弹出最后一个元素：

while (theClouds.length) {
  theClouds.pop();
}

这两种方法都会直接修改原数组，所有持有该数组引用的地方都会看到数组被清空。

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