javascript迭代算法接受数组中应拒绝的一半分数

Question

我想检查我的变量是否是一个数组，以及它的元素是否包含带有“.png”或“.jpg”的子字符串。所以我写了这段代码:

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 n in test)
   {
     if(test[n].includes('.png') || test[n].includes('.PNG') || test[n].includes('.jpg') || test[n].includes('.JPG') )
     {
        test.splice(n,1);
     }
   } 
     console.log(test.length); // here is 3
  };

但它总是让数组的每个偶数索引通过，所以我得到了一半的分数错误。我不知道这怎么可能。你知道我该如何解决它吗？

Answer 1

迭代的问题是在拼接数组时索引从0到5。当索引到达第 3 个元素时，数组的大小变为 3，因此 test[3]、test[4] 和 test[ 5] 未定义。这就是为什么您得到的大小为 3。尝试从 5 迭代到 0，例如:

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 n = test.length - 1; n >= 0; n--) {
    if(test[n].includes('.png') || test[n].includes('.PNG') || test[n].includes('.jpg') || test[n].includes('.JPG')) {
      test.splice(n, 1);
    }
  } 
  console.log(test.length);
};

或者，您可以使用正则表达式来减少代码:

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 n = test.length - 1; n >= 0; n--) {
    if(/\.(png|jpg)$/i.test(test[n])) {
      test.splice(n, 1);
    }
  } 
  console.log(test.length);
};

更好的版本:

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)) {
  console.log(test.filter(e => ! /\.(png|jpg|svg)$/i.test(e)).length);
};