如何使用filter和map过滤对象数组中的嵌套数组？

问题描述 #

我有一个多层嵌套的对象数组，需要过滤第二层嵌套的options数组，仅保留title为Samsung的选项。

原始数据 #

let data = [
    {
        title : "fashion",
        options : [{
            title : "men",
            options : [
                { title : "shirt"},
                { title : "pants"},
                { title : "belt"},
                { title : "shoes"},
            ]
        },{
            title : "women",
            options : [
                { title : "shirt"},
                { title : "jeans"},
                { title : "sarees"},
                { title : "salwar"},
            ]
        }
        ]
    },
    {
        title : "electronics",
        options : [{
            title : "mobile",
            options : [
                { title : "Samsung"},
                { title : "Nokia"},
                { title : "Apple"},
                { title : "OnePlus"},
            ]
        },{
            title : "TV",
            options : [
                { title : "Samsung"},
                { title : "Sony"},
                { title : "Sansui"},
                { title : "OnePlus"},
            ]
        }
        ]
    }
]

期望输出 #

let data = [
    {
        title : "electronics",
        options : [{
            title : "mobile",
            options : [
                { title : "Samsung"}                            
            ]
        },{
            title : "TV",
            options : [
                { title : "Samsung"},
            ]
        }
        ]
    }
]

我已经用三层嵌套for循环实现了需求，想知道有没有用filter和map的更优实现方式？

实现方案 #

可以用filter和map的组合实现，代码更简洁且可读性更强，具体实现如下：

const filteredData = data
  .map(item => {
    // 处理第二层options，筛选出子项中title为Samsung的选项，并过滤空结果
    const processedOptions = item.options
      .map(subItem => ({
        ...subItem,
        options: subItem.options.filter(opt => opt.title === 'Samsung')
      }))
      .filter(subItem => subItem.options.length > 0);
    
    return {
      ...item,
      options: processedOptions
    };
  })
  // 过滤掉没有有效子选项的顶层分类
  .filter(item => item.options.length > 0);

console.log(filteredData);

代码说明 #

• 顶层map：遍历每个顶层分类，生成包含处理后子选项的新对象，避免修改原数据
• 子项map：遍历分类下的子项，复制原有属性的同时，用filter筛选出符合条件的选项
• 子项filter：移除筛选后没有符合条件选项的子项
• 顶层filter：移除没有有效子项的顶层分类，比如示例中的fashion分类会被过滤

这种方式基于函数式编程风格，避免了嵌套循环的繁琐，代码逻辑清晰且易于维护。

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