Vue中forEach内用splice批量删数组元素遇异常，求解决方案

我有一个数组形式的图片网格，需要实现多选删除功能：勾选图片时维护selectedImages数组存储选中元素在additionalPhotos（图片网格数组）中的索引，点击删除按钮时执行以下方法，但遇到splice仅生效一次的问题：

removeSelectedImages() {
  console.log(this.additionalPhotos);  //图片网格数组
  console.log(this.selectedImages);  //选中索引数组

  this.selectedImages.sort().reverse();
  this.selectedImages.forEach((selectedImageIndex, index) => {
    this.additionalPhotos.splice(selectedImageIndex, 1);
    this.selectedImages.splice(index, 1);
  });
}

例如选中索引1和2的图片时，仅索引2的元素被删除，循环第二次未执行；移除splice操作后循环能正常执行两次。

你在forEach循环中同时修改了正在遍历的selectedImages数组：当执行this.selectedImages.splice(index, 1)时，原数组长度会缩短，forEach的迭代逻辑会基于动态变化的数组长度跳过后续元素。比如原selectedImages排序反转后是[2,1]，第一次循环删除数组索引0的元素后，数组仅剩[1]，forEach直接终止迭代，导致第二次删除操作无法执行。

推荐三种可靠的实现方式，按简洁度和可维护性排序：

方法1：用filter重新生成数组（最简洁） #

直接过滤掉选中的索引，完全规避索引偏移问题，代码简洁且性能优异：

removeSelectedImages() {
  // 将选中索引转为Set，提升查找效率
  const selectedSet = new Set(this.selectedImages);
  // 过滤出不在选中集合中的元素，重新赋值给图片网格数组
  this.additionalPhotos = this.additionalPhotos.filter((_, idx) => !selectedSet.has(idx));
  // 清空选中索引数组
  this.selectedImages = [];
}

方法2：遍历选中数组的副本（兼容splice逻辑） #

如果需要保留splice修改原数组的逻辑，可以遍历selectedImages的副本，同时保持从大到小的顺序删除，避免索引偏移：

removeSelectedImages() {
  // 生成降序排列的选中索引副本，避免遍历原数组时被修改影响
  const sortedSelected = [...this.selectedImages].sort((a, b) => b - a);
  
  sortedSelected.forEach(idx => {
    this.additionalPhotos.splice(idx, 1);
  });
  
  // 清空选中索引数组
  this.selectedImages = [];
}

方法3：反向遍历原数组（手动控制迭代） #

用for循环反向遍历原数组，自己控制迭代索引，不受数组长度变化影响：

removeSelectedImages() {
  // 先将选中索引按降序排列
  this.selectedImages.sort((a, b) => b - a);
  
  // 从后往前遍历，避免删除操作影响后续索引的正确性
  for (let i = this.selectedImages.length - 1; i >= 0; i--) {
    const idx = this.selectedImages[i];
    this.additionalPhotos.splice(idx, 1);
  }
  
  this.selectedImages = [];
}

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