本文详解如何对包含多层嵌套结构的数组对象（如 myData 中每个对象的 items 数组）执行精准过滤与重构，仅保留 flaggedItem !== null 的子项，并保持原始对象结构。
本文详解如何对包含多层嵌套结构的数组对象（如 `mydata` 中每个对象的 `items` 数组）执行精准过滤与重构，仅保留 `flaggeditem !== null` 的子项，并保持原始对象结构。
在实际前端开发中，我们常需处理形如 myData: [{ id: 'id1', items: [...] }, ...] 的嵌套数据结构。当目标是按子字段（如 items.flaggedItem）条件筛选并保留父级结构时，直接链式调用 map() + filter() 容易出错——常见误区包括：忽略返回值、未重建对象、误用可选链（?.）导致空数组被跳过，或混淆 null 与 falsy 值（如 0、false）。
正确做法是：逐层解构、独立过滤、显式重组。核心逻辑分三步：
- 使用 map() 遍历外层数组（每个 objValue）；
- 对其 items 数组调用 filter()，严格判断 flaggedItem !== null（⚠️避免 !items.flaggedItem，否则会错误剔除 0 或 false）；
- 用展开语法 { ...objValue, items: filteredItems } 返回新对象，确保其他字段（如 id）完整保留。
以下是可直接运行的示例代码：
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 }] }
// ]✅ 关键注意事项：
- 严格比较 !== null：若业务允许 0、false 等有效值，绝不可用 item.flaggedItem（隐式转换为 false）或 item.flaggedItem != null（会误判 undefined）。
- 避免副作用：始终返回新对象（使用展开语法或 Object.assign），不修改原数组，符合函数式编程原则。
- 空数组安全：filter() 在无匹配项时返回空数组 []，无需额外判断，结构依然完整。
- 扩展性提示：如需进一步扁平化所有 flaggedItem（获取一维列表），可在外层追加 .flat()：myData.map(...).flat()。
掌握这一模式后，可轻松适配类似场景：如按 user.profile.active === true 过滤用户列表，或提取多级菜单中 visible: true 的导航项。本质是「结构守恒的条件投影」——既精炼数据，又不失上下文。
