本文详解如何对包含多层嵌套结构的数组（如 myData 中每个对象的 items 子数组）进行精准映射与过滤，重点解决「仅保留 flaggedItem 非 null 的子项」这一典型需求，并提供可复用、类型安全、副作用可控的函数式实现方案。
本文详解如何对包含多层嵌套结构的数组（如 `mydata` 中每个对象的 `items` 子数组）进行精准映射与过滤，重点解决「仅保留 `flaggeditem` 非 null 的子项」这一典型需求，并提供可复用、类型安全、副作用可控的函数式实现方案。
在处理真实业务数据时，我们常遇到类似 myData 这样的嵌套结构：顶层为对象数组，每个对象又包含一个 items 子数组，而我们需要保留原始对象结构的同时，仅筛选出 items 中 flaggedItem 不为 null（且非 undefined、0 等 falsy 值需特别注意）的元素。直接链式调用 .map().filter().map() 容易导致返回值错乱（如丢失外层对象）、逻辑断裂或产生空数组嵌套问题。
正确的做法是采用「外层映射 + 内层过滤 + 结构重组」三步策略：
- 外层 map 遍历每个主对象，确保结果仍为同长度的对象数组；
- 内层 filter 作用于 items 数组，使用严格不等判断（!== null）避免误判 0、false 等合法值；
- 通过对象展开语法 { ...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 filteredMyData = myData.map(obj => ({
...obj,
items: obj.items?.filter(item => item.flaggedItem !== null) || []
}));
console.log(filteredMyData);
// 输出：
// [
// { id: "id1", items: [{ id: "idTwo", flaggedItem: 1 }] },
// { id: "id2", items: [{ id: "idThree", flaggedItem: 1 }, { id: "idFour", flaggedItem: 2 }] }
// ]✅ 关键注意事项：
- 使用 obj.items?.filter(...) 配合可选链（Optional Chaining）防御性处理 items 为 undefined 或 null 的边界情况；
- 后续 || [] 提供兜底空数组，避免 filter 在 undefined 上调用报错；
- 切勿使用 item.flaggedItem 作为布尔判断条件——若 flaggedItem 可能为 0、false 或 ""，这些合法值会被错误过滤；务必显式比对 !== null（或 != null 若需同时排除 undefined）；
- 此方案完全函数式：不修改原数组（immutable），便于调试与状态管理（如 React 中的 useState 更新）。
如需进一步扩展（例如同时过滤并映射 items 内部字段、添加排序、或支持深层嵌套），可将内层逻辑封装为独立函数，提升可读性与复用性。始终牢记：多级嵌套操作的核心是「分层解耦」——每一层只专注自己的数据形态与职责。
