JavaScript遍历算法及数组图片后缀检测删除代码问题咨询

嘿，我来帮你拆解这段JavaScript代码里的问题，再给你对应需求的优化方案～

一、当前代码的核心bug #

你这段遍历删除数组元素的逻辑，有两个很关键的问题：

• 用for...in遍历数组是错误用法：for...in是专门用来遍历对象的可枚举属性的，虽然偶尔能拿到数组索引，但它会遍历数组原型链上的额外属性，而且拿到的索引是字符串类型，很容易在后续操作里出问题。遍历数组绝对不是它的正确场景。
• 正序遍历+splice导致漏删元素：当你用正序循环时，调用splice删除一个元素后，数组后面的所有元素都会往前挪一位。比如你删除了索引2的元素，原来索引3的元素会变成新的索引2，但下一次循环会直接走到索引3，就把这个元素跳过了。就像你的测试数组有6个png元素，用当前代码跑的话，最后test.length会是3而不是0，就是因为漏删了一半。

二、针对你的需求的优化实现 #

先明确你的两个核心需求：

1. 检查变量是否为数组，且元素是否是.png/.jpg格式（不区分大小写）
2. 从数组中选取原本应被拒绝的半数元素（我默认这里的“被拒绝”指不符合图片格式，或者你也可以根据实际情况调整）

1. 简化格式判断逻辑 #

你原来写了4个includes来判断后缀，太繁琐了，用正则表达式可以一次搞定不区分大小写的匹配：

// 判断是否为图片格式（png/jpg，不区分大小写）
const isImage = (str) => /\.(png|jpg)$/i.test(str);

这里的/i标记表示忽略大小写，完美覆盖.png/.PNG/.jpg/.JPG所有情况。

2. 正确的数组筛选/删除方式 #

推荐方案：用filter生成新数组（不修改原数据，更安全）

filter是处理数组筛选的最佳实践，它不会修改原数组，而是返回一个符合条件的新数组，完全避免了遍历索引混乱的问题：

let test = ['empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png','empty_250x380@3x.png'];

if(Array.isArray(test)) {
  // 第一步：筛选出「原本应被拒绝的元素」——这里假设是「非图片格式」的元素
  const rejectedItems = test.filter(item => !isImage(item));
  
  // 第二步：选取半数（这里取前半段，要是想随机取可以看后面的补充）
  const halfRejected = rejectedItems.slice(0, Math.floor(rejectedItems.length / 2));
  
  console.log('半数被拒绝的元素：', halfRejected);
  console.log('原数组筛选后剩余（非图片元素）：', rejectedItems);
}

如果你的“被拒绝元素”是指图片格式的元素，只需要把filter里的!去掉就行：

const rejectedItems = test.filter(item => isImage(item));

如果你一定要修改原数组（不推荐，会污染原数据）

那必须用倒序for循环，这样删除元素后不会影响前面未遍历的索引：

let test = ['empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png', 'empty_250x380@3x.png','empty_250x380@3x.png'];

if(Array.isArray(test)) {
  // 倒序遍历，从最后一个元素往前找
  for(let i = test.length - 1; i >= 0; i--) {
    if(isImage(test[i])) {
      test.splice(i, 1);
    }
  }
  console.log(test.length); // 这里会输出0，因为所有元素都是png
}

3. 补充：随机选取半数元素 #

如果你的需求是随机选取半数被拒绝的元素，而不是按顺序取，可以先打乱数组再切片：

// 打乱数组的工具函数
const shuffleArray = (arr) => [...arr].sort(() => Math.random() - 0.5);

// 用法：
const halfRejected = shuffleArray(rejectedItems).slice(0, Math.floor(rejectedItems.length / 2));

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