JavaScript中匹配两个数组并按第二个数组顺序提取匹配值生成新数组

实现思路 #

核心逻辑分两步：

• 先统计第一个数组中各元素的出现总次数，作为后续筛选的可用额度
• 按顺序遍历第二个数组，当前元素如果还有可用额度就保留，同时扣减对应额度，否则直接过滤

完整实现代码 #

let strArr1 = ['a', 'p', 'p', 'l', 'e']; 
let strArr2 = ['p','p','a','e', 'l', 'l', 'k'];

// 统计第一个数组的元素可用次数
const countMap = strArr1.reduce((prev, curr) => {
  prev[curr] = (prev[curr] || 0) + 1;
  return prev;
}, {});

// 按规则筛选第二个数组
const newArr = strArr2.filter(item => {
  if (countMap[item] > 0) {
    countMap[item]--;
    return true;
  }
  return false;
});

console.log(newArr); // 输出：['p', 'p', 'a', 'e', 'l']

原方案问题说明 #

1. 双层for循环方案：存在双重匹配的逻辑错误，第一个数组的每个元素都会和第二个数组全量比对一次，会重复统计符合条件的元素，且push时误用了第一个数组的下标取值，导致结果错乱。
2. 单纯filter+includes方案：只能判断元素是否在第一个数组中存在，无法控制元素的出现次数不超过第一个数组的上限，所以会保留多余的l元素。

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