JavaScript：根据嵌套对象checked值过滤并保留目标数组元素

我有一个对象数组，每个对象内部包含名为parents的子数组，需要过滤该子数组，仅保留其中checked字段值为true的元素。已尝试使用map、forEach、splice方法，但未得到预期结果。

输入数组示例：

[
    {
        "id": 1,
        "parent": "Parent 1",
        "parents": [
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": false
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": false
            }
        ]
    },
    {
        "id": 1,
        "parent": "Parent 2",
        "parents": [
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": false
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": false
            }
        ]
    }
]

预期输出结果：

[
    {
        "id": 1,
        "parent": "Parent 1",
        "parents": [
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            }
        ]
    },
    {
        "id": 1,
        "parent": "Parent 2",
        "parents": [
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            },
            {
                "label": "New Item",
                "editable": true,
                "children": [],
                "checked": true
            }
        ]
    }
]

推荐使用map配合filter实现，这种方式不会修改原数组，逻辑清晰且无副作用：

const filteredArray = originalArray.map(item => ({
  ...item,
  parents: item.parents.filter(parent => parent.checked === true)
}));

逻辑说明 #

• map遍历原数组的每个对象，通过扩展运算符...item保留原对象的所有原有属性
• 对每个对象的parents子数组使用filter，仅保留checked为true的元素
• 最终返回一个全新的数组，完全符合预期输出格式

如果需要直接修改原数组（不推荐，尽量保持数据不可变性），可以用forEach配合filter重新赋值：

originalArray.forEach(item => {
  item.parents = item.parents.filter(parent => parent.checked === true);
});

之前用splice失败大概率是因为遍历数组时修改了数组长度，导致索引错乱。filter直接返回过滤后的新数组，避免了这类问题。

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