基于与逻辑（&&）过滤含字符串数组的对象数组：SiteType多条件筛选

嘿，这问题我之前做项目时刚好碰到过，给你一步步拆解实现思路，保证清晰好用！

你需要完成两个层级的过滤：

• 第一关：基于位置选择结果，先把主数据里对应位置的项筛出来
• 第二关：对筛过位置的数据，再用多选的Problem Type做「逻辑与」过滤——也就是只有当某个项的SiteType包含所有选中的Problem Type时，才保留它

先拿一个贴近你场景的示例数据举例，你可以直接替换成自己的真实字段：

// 你的主数据数组
const mainData = [
  {
    id: 1,
    location: "纽约",
    siteType: {
      problemTypes: ["Access", "Tools", "Safety"]
    }
  },
  {
    id: 2,
    location: "伦敦",
    siteType: {
      problemTypes: ["Access", "Cleaning"]
    }
  },
  {
    id: 3,
    location: "纽约",
    siteType: {
      problemTypes: ["Tools", "Safety"]
    }
  },
  {
    id: 4,
    location: "纽约",
    siteType: {
      problemTypes: ["Access", "Tools"]
    }
  }
];

// 假设位置选择结果
const selectedLocation = "纽约";
// 多选后的Problem Type数组
const selectedProblemTypes = ['Access','Tools'];

1. 单独实现位置过滤 #

这一步比较直接，用数组的filter方法匹配location字段就行：

// 先筛出对应位置的数据
const locationFilteredData = mainData.filter(item => item.location === selectedLocation);

2. 重点：实现「逻辑与」的Problem Type过滤 #

这里不能直接用includes（它是「逻辑或」，只要包含其中一个就通过），我们需要的是所有选中的类型都必须存在，这时候用Array.every()就完美适配——它会遍历选中的类型数组，只有当每一个类型都满足条件时，才返回true：

// 对位置过滤后的数据，再做Problem Type的与逻辑过滤
const finalFilteredData = locationFilteredData.filter(item => {
  // 检查选中的每一个Problem Type，都在当前项的problemTypes数组里
  return selectedProblemTypes.every(type => item.siteType.problemTypes.includes(type));
});

3. 合并成一步（更简洁） #

你也可以把两个过滤条件写到同一个filter回调里，减少中间变量：

const finalFilteredData = mainData.filter(item => {
  // 位置匹配 并且 所有选中的Problem Type都存在
  return item.location === selectedLocation && 
         selectedProblemTypes.every(type => item.siteType.problemTypes.includes(type));
});

额外优化：处理空选情况 #

如果用户没选任何Problem Type，我们应该跳过这个过滤条件，直接保留所有位置匹配的项，加个判断就行：

const finalFilteredData = mainData.filter(item => {
  // 位置匹配判断
  const isLocationMatch = item.location === selectedLocation;
  // 空选时直接通过，否则走与逻辑判断
  const isProblemTypeMatch = selectedProblemTypes.length === 0 
    ? true 
    : selectedProblemTypes.every(type => item.siteType.problemTypes.includes(type));
  
  return isLocationMatch && isProblemTypeMatch;
});

用上面的示例数据，最终筛选出来的会是id为1和4的项，因为它们既在纽约，又同时包含Access和Tools两个类型，完全符合你的需求！

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