JavaScript如何根据指定数组过滤含重复键元素的数组

问题说明 #

需要实现数组过滤逻辑：对比两个数组，按照第二个数组中元素的出现次数，在第一个数组中删除对应数量的匹配元素，不能把所有匹配值的元素全部删除。
示例入参预期：

• 原数组arr1 = [1, 2, 3, 3, 3, 4]
• 过滤规则数组arr2 = [1, 3]
• 预期输出：[2, 3, 3, 4]（仅删除1个1、1个3，剩余的两个3保留）

错误写法对比 #

如果直接用includes判断过滤，会把所有匹配arr2的元素全部删掉，不符合需求：

// 错误写法，输出结果为 [2,4]
function wrongFilter(arr1, arr2) {
  return arr1.filter(item => !arr2.includes(item))
}

正确实现 #

核心思路是先统计arr2中每个值需要删除的次数，遍历arr1时按计数扣减删除额度，额度用完后后续匹配的元素正常保留：

const arr1 = [1, 2, 3, 3, 3, 4];
const arr2 = [1, 3];

function filteredArray(arr1, arr2) {
  // 记录每个值需要删除的数量
  const deleteCounter = new Map();
  for (const val of arr2) {
    deleteCounter.set(val, (deleteCounter.get(val) ?? 0) + 1);
  }

  return arr1.filter(item => {
    const remain = deleteCounter.get(item);
    // 无待删额度，直接保留
    if (!remain) return true;
    // 有待删额度，扣减1次，当前元素过滤
    deleteCounter.set(item, remain - 1);
    return false;
  });
}

const newArr = filteredArray(arr1, arr2);
console.log(newArr); // 输出 [2, 3, 3, 4]，符合预期

扩展兼容 #

这个写法同时支持arr2本身存在重复值的场景，比如arr2 = [3,3]时，会删除2个3，最终输出结果为[1, 2, 3, 4]。

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