如何通过为数组元素赋值undefined隐藏图片且避免顺序依赖错误？

核心问题分析 #

你当前的写法存在两个关键问题：

1. 将元素设为undefined后直接修改images.length，会在数组内留下无效的undefined占位（当删除的不是最后一个元素时），后续遍历到这些位置时，调用图片相关方法会触发报错。
2. 修改数组长度后，循环的索引逻辑会混乱，导致非逆序删除时出现索引越界或元素遗漏的问题。

方法一：直接删除数组元素（推荐） #

使用数组的splice()方法直接移除对应索引的元素，同时同步删除carX和carY数组的对应元素，确保数组始终只保留有效元素，不会留下undefined的坑，也不会出现索引混乱。

修改后的代码片段：

function draw() {
  // 遍历所有图片元素
  for (let i = 0; i < images.length; i++) {
    if (mouseIsPressed && carX[i] <= mouseX && mouseX <= carX[i] + 432/4 && carY[i] <= mouseY && mouseY <= carY[i] + 128/4) {
      // 删除当前索引的图片及对应坐标
      images.splice(i, 1);
      carX.splice(i, 1);
      carY.splice(i, 1);
      // 回退索引，避免跳过下一个前移的元素
      i--;
    }
    // 绘制有效图片
    if (images[i]) {
      image(images[i], carX[i], carY[i], 432/4, 128/4);
    }
  }
}

为什么要i--？ #

用splice()删除第i个元素后，数组中i之后的元素会自动前移一位，如果不回退索引，下一次循环会直接跳到i+1，跳过了原本在i+1位置、现在移到i的元素。

方法二：保留数组位置，跳过无效元素 #

如果需要保留数组原有长度（比如后续可能恢复图片），可以仅将元素设为undefined，但在绘制前必须判断元素是否有效，跳过undefined的元素。

修改后的代码片段：

function draw() {
  for (let i = 0; i < images.length; i++) {
    // 跳过已标记为无效的元素
    if (!images[i]) continue;
    
    if (mouseIsPressed && carX[i] <= mouseX && mouseX <= carX[i] + 432/4 && carY[i] <= mouseY && mouseY <= carY[i] + 128/4) {
      // 仅标记为undefined，不修改数组长度
      images[i] = undefined;
    }
    
    // 绘制有效图片
    image(images[i], carX[i], carY[i], 432/4, 128/4);
  }
}

这种方式不会修改数组长度，也不会出现索引混乱，只需在绘制前判断元素是否存在即可避免报错。

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