本文详解如何对包含多层嵌套结构的对象数组（如 myData[].items[].flaggedItem）进行精准过滤，保留 flaggedItem 非 null 的子项，并维持原始对象结构。
本文详解如何对包含多层嵌套结构的对象数组（如 `mydata[].items[].flaggeditem`）进行精准过滤，保留 `flaggeditem` 非 null 的子项，并维持原始对象结构。
在处理真实业务数据时，我们常遇到类似如下结构的嵌套数组：顶层为对象列表，每个对象又包含 items 子数组，而子数组中每个元素需依据深层字段（如 flaggedItem）进行条件筛选。关键需求是——不扁平化数据，而是按原层级结构过滤子项，即：保留所有顶层对象，但仅保留其内部 items 中 flaggedItem !== null 的元素。
正确做法是组合使用 .map() 与 .filter()，并注意链式调用的返回值语义：
- .map() 用于遍历顶层对象，生成新结构；
- 每次迭代中，对 obj.items 单独调用 .filter()，筛选出 flaggedItem 非 null（注意：!= null 或 !== null 可安全排除 null 和 undefined，若需更严格排除 undefined，建议用 != null；若仅排除 null 而允许 0、false 等 falsy 值，必须显式比较）；
- 使用扩展运算符 { ...objValue, items: filteredItems } 构建新对象，确保其他属性（如 id）完整保留，仅更新 items 字段。
以下是可直接运行的示例代码：
const myData = [
{
"id": "id1",
"items": [
{ "id": "idOne", "flaggedItem": null },
{ "id": "idTwo", "flaggedItem": 1 }
]
},
{
"id": "id2",
"items": [
{ "id": "idThree", "flaggedItem": 1 },
{ "id": "idFour", "flaggedItem": 2 }
]
}
];
const filteredData = myData.map(obj => ({
...obj,
items: obj.items.filter(item => item.flaggedItem !== null)
}));
console.log(filteredData);
// 输出：
// [
// { id: "id1", items: [{ id: "idTwo", flaggedItem: 1 }] },
// { id: "id2", items: [{ id: "idThree", flaggedItem: 1 }, { id: "idFour", flaggedItem: 2 }] }
// ]⚠️ 注意事项：
- 避免常见误区：不要在 .map() 内部嵌套 .map() 处理子项后忽略返回值（如原问题中未 return 导致结果为 undefined 数组）；
- 空数组安全：.filter() 对空 items 数组天然安全，无需额外判空；
- 性能考量：该方案时间复杂度为 O(n×m)，适用于中等规模数据；若数据量极大且频繁操作，可考虑预构建索引或使用 for...of 手动优化；
- 扩展性提示：如需进一步筛选（例如 flaggedItem > 0），只需修改 filter 条件；如需深度克隆（防止修改原对象），可结合 structuredClone()（现代环境）或 Lodash 的 cloneDeep。
总结：多层级对象数组的条件过滤，核心在于「分层处理、逐级映射」——顶层用 map 维持结构，子层用 filter 精准裁剪。掌握这一模式，可轻松应对 user.posts.comments.isApproved 等任意深度的嵌套筛选场景。
