JavaScript筛选数据时如何合并多个对象数组为单个数组

现有代码出现历史筛选结果丢失，核心是两个逻辑错误：

• filtered变量声明在forEach循环块内部，属于块级作用域变量，每轮循环执行时都会重新初始化，上一轮的筛选结果无法跨轮次留存
• 即便把变量声明提到循环外部，当前写法每轮循环都是直接给filtered重新赋值，而非累加匹配结果，前一轮生成的筛选数组会被后一轮的结果直接覆盖

方案1：循环累加匹配结果 #

在循环外部提前初始化空数组作为最终结果容器，每轮筛选出对应语言的人员列表后，将结果追加合并到总结果数组中：

// 初始化总结果数组
let filtered = [];
selected.forEach(langsel => {
  // 筛选当前选中语言对应的人员
  const matchPersons = person.filter(pers => pers.language === langsel);
  // 将当前匹配结果合并到总数组，两种写法二选一即可
  filtered = filtered.concat(matchPersons);
  // filtered.push(...matchPersons);
});

方案2：单次筛选实现（推荐） #

无需遍历选中的语言选项做多次筛选，直接在单次filter遍历中判断人员语言是否属于已选中的语言集合即可，代码更简洁，遍历效率更高：

const filtered = person.filter(pers => selected.includes(pers.language));

当同时勾选English、Spanish两个语言复选框时，最终返回的filtered会自动合并两个语言的所有人员数据，不会再出现历史结果丢失的问题：

合并后的返回结果：

[
  {"id": "2", "name": "Tomas Addreh", "language": "English"},
  {"id": "6", "name": "Mark Addreh", "language": "English"},
  {"id": "15", "name": "Alex Atres", "language": "Spanish"},
  {"id": "1", "name": "Mark Sertoj", "language": "Spanish"},
  {"id": "12", "name": "Martha Forrest", "language": "Spanish"}
]

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