如何基于另一数组的选中条件过滤JavaScript数组？

首先把arr2中所有checked为true的类型提取出来存入Set，这样后续查找效率会更高：

const selectedGenres = new Set(
  arr2.filter(item => item.checked).map(item => item.genre)
);

接着用filter方法过滤arr1，搭配some方法判断当前对象的genre数组中是否存在至少一个元素在上述Set中：

const filteredArr = arr1.filter(item => {
  return item.genre.some(genre => selectedGenres.has(genre));
});

完整可运行代码 #

const arr1=[
  {
    "id":1,"genre":["horror","drama","mystery"]
  },
   {
    "id":2,"genre":["romance"]
  },
   {
    "id":3,"genre":["adventure","drama"]
  },
];

const arr2=[
  {
    "genre":"horror",
    "checked":false
  },
  {
    "genre":"drama",
    "checked":true
  },
  {
    "genre":"mystery",
    "checked":false
  },
  {
    "genre":"romance",
    "checked":false
  },
  {
    "genre":"adventure",
    "checked":true
  }
];

// 提取所有选中的类型到Set
const selectedGenres = new Set(
  arr2.filter(item => item.checked).map(item => item.genre)
);

// 过滤得到目标数组
const filteredArr = arr1.filter(item => item.genre.some(g => selectedGenres.has(g)));

console.log(filteredArr);

运行后会输出你期望的结果：

[
 {
   "id":1,"genre":["horror","drama","mystery"]
  },
{
    "id":3,"genre":["adventure","drama"]
  },
]

逻辑说明 #

• 使用Set存储选中类型：避免每次检查都遍历整个arr2，尤其是数据量大时，能显著提升查找性能。
• filter+some组合：filter负责筛选arr1元素，some只要找到一个符合条件的genre就会返回true，无需遍历完整个genre数组，效率更高。

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