如何在JavaScript嵌套数组中用嵌套filter筛选canceled为false的costBreakdowns

你的外层filter()回调返回的是内层filter()生成的数组，而在JavaScript中任何数组（即使是空数组）都是真值。由于filter()会保留回调返回真值的元素，所以所有分组都会被保留，导致筛选看似无效。

根据你的需求，分两种情况处理：

情况1：保留所有分组，仅过滤每组中已取消的费用明细 #

如果你想保留所有分组（即使过滤后该分组没有剩余费用明细），只需要用map()替换外层的filter()，同时在每个分组内过滤costBreakdowns：

const filteredGroups = a.activeBookingsCostBreakdownGroups.map(group => ({
  ...group,
  costBreakdowns: group.costBreakdowns.filter(item => item.canceled === false)
}));

console.log(filteredGroups);

这段代码会遍历每个分组，复制原分组的所有属性，并将costBreakdowns替换为仅包含未取消项的列表。

情况2：仅保留包含未取消费用明细的分组 #

如果你想剔除那些过滤后没有剩余费用明细的分组，可以先通过filter()筛选出符合条件的分组，再用map()清理每组的costBreakdowns：

const filteredGroups = a.activeBookingsCostBreakdownGroups
  .filter(group => group.costBreakdowns.some(item => !item.canceled))
  .map(group => ({
    ...group,
    costBreakdowns: group.costBreakdowns.filter(item => !item.canceled)
  }));

console.log(filteredGroups);

这里some()会检查分组中是否存在至少一个未取消的费用明细（返回布尔值，符合filter()的回调要求），之后map()再过滤每组的费用明细。

优化版（单次遍历） #

如果追求性能，可以用reduce()一次性完成筛选和转换，避免两次遍历分组：

const filteredGroups = a.activeBookingsCostBreakdownGroups.reduce((acc, group) => {
  const validBreakdowns = group.costBreakdowns.filter(item => !item.canceled);
  if (validBreakdowns.length > 0) {
    acc.push({ ...group, costBreakdowns: validBreakdowns });
  }
  return acc;
}, []);

console.log(filteredGroups);

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