TypeScript/JavaScript嵌套元素高级过滤：移除空subItems实现方案

以下是满足需求的完整TypeScript代码，仅使用数组原生的map和filter方法完成多层过滤：

interface GrandChild {
    id: number,
    values: Array<string>,
}

interface Child {
    id: number,
    subItems: Array<GrandChild>
}

interface Foo {
    items: Array<Child>
}

const data: Foo = {
    items: [
        { id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
        { id: 2, subItems: [ { id: 20, values: ['REMOVE', 'REMOVE'] }, { id: 21, values: ['REMOVE'] } ] },
        { id: 3, subItems: [ { id: 30, values: ['REMOVE'] }, { id: 31, values: ['REMOVE'] }, { id: 32, values: ['REMOVE', '32'] } ] },
    ]
};

const filteredData: Foo = {
  ...data,
  items: data.items
    .map(item => {
      // 先过滤subItem的values，再移除values为空的subItem
      const filteredSubItems = item.subItems
        .map(subItem => ({
          ...subItem,
          values: subItem.values.filter(value => value !== 'REMOVE')
        }))
        .filter(subItem => subItem.values.length > 0);
      return { ...item, subItems: filteredSubItems };
    })
    // 移除所有subItem都被过滤掉的item
    .filter(item => item.subItems.length > 0)
};

过滤逻辑拆解 #

1. 内层subItem过滤：对每个subItem的values过滤掉'REMOVE'后，立刻用filter移除values为空数组的GrandChild对象；
2. 外层item过滤：处理完每个Child的subItems后，再过滤掉subItems为空数组的Child对象（比如原数据中id=2的条目）；
3. 全程仅使用数组原生方法，无额外循环，完全符合需求。

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