JS如何简洁实现移除每5个元素为一组的数组中第3、4个元素

需求说明 #

输入数组长度固定为5的倍数，以每连续5个元素为一组，移除每组中第3、第4个元素（从1开始计数，对应数组索引2、3），最终仅保留每组第1、2、5个元素，输出长度为原数组3/5的结果数组。
原实现通过两次循环搭配splice原地修改数组完成需求，代码如下：

const arr = ["good","good","bad","bad","good","good","good","bad","bad","good",];

// remove every 3rd of 5 elements
for (let i = 2; i <= arr.length; i += 4) {
  arr.splice(i, 1);
}

// remove every 3rd of 4 elements
for (let i = 2; i <= arr.length; i += 3) {
  arr.splice(i, 1);
}

console.log(arr)
// expected output ["good","good","good","good","good","good"]

优化方案 #

原写法存在两个明显不足：splice每次执行都会触发数组后续元素的位移，两次循环的步长需要结合第一次删除后的数组长度推导，代码可读性差，后续维护的人很难快速看懂删除逻辑。
最简洁的实现不需要原地修改数组，直接用filter按索引规则过滤生成新数组即可，逻辑完全和需求对齐，没有多余的计算：

const arr = ["good","good","bad","bad","good","good","good","bad","bad","good"];

// 每5个元素为一组，索引对5取模结果为0、1、4的元素就是需要保留的第1、2、5位元素
const res = arr.filter((_, idx) => {
  const posInGroup = idx % 5;
  return posInGroup === 0 || posInGroup === 1 || posInGroup === 4;
});

console.log(res); 
// 输出: ["good","good","good","good","good","good"]

这个方案的优势：

• 逻辑直白，判断条件和需求规则一一对应，不需要反推循环步长，维护成本低
• 没有原地修改原数组，避免了splice带来的反复元素位移开销，大数组场景下性能更好
• 代码结构简单，仅需一次遍历就可以得到结果

如果业务场景强制要求原地修改原数组，也可以选择从数组尾部倒序遍历，每遇到一组里的索引3、2位置就执行删除，避免删除元素导致的索引偏移问题，但可读性和性能都不如过滤生成新数组的方案。

内容的提问来源于stack exchange，提问作者Joshua Pelton-Stroud