如何根据name值删除嵌套对象数组中的指定对象？

问题场景 #

给定如下嵌套对象数组：

[
    {
        "items": [
            {
                "name": "See data",
                "href": "/data"
            },
            {
                "name": "Account",
                "href": "/account",
                "icon": {}
            }
        ]
    },
    {
        "items": [
            {
                "name": "name",
                "href": "/name",
                "icon": {}
            },
            {
                "name": "My Rooms",
                "href": "/rooms",
                "icon": {}
            }
        ]
    },
    {
        "items": [
            {
                "name": "user",
                "href": "/user",
                "icon": {}
            }
        ]
    }
]

需要通过name值删除内部对象（例如删除name为"Account"的对象），目前使用硬编码delete myData[0].items[1];可以实现，但灵活性不足，需要更通用的方法。

解决方案 #

1. 删除指定分组中匹配name的对象

如果明确要操作某一组（比如索引为0的分组），用filter过滤是更灵活的方式，无需依赖固定索引：

// 定义要删除的目标name
const targetName = "Account";
// 过滤第0组的items，剔除目标对象
myData[0].items = myData[0].items.filter(item => item.name !== targetName);

filter会返回一个新数组，自动剔除所有name匹配目标值的对象，直接赋值回原数组即可完成删除，不会留下数组空位。

2. 全局删除所有分组中匹配name的对象

如果需要遍历所有分组，删除所有name匹配的对象，用forEach遍历外层数组，再对每个分组的items做过滤：

const targetName = "Account";
// 遍历每个分组，统一过滤items
myData.forEach(group => {
  group.items = group.items.filter(item => item.name !== targetName);
});

这种方式会处理所有分组，不管目标对象在哪个分组里都会被删除。

3. 原地修改原数组（不生成新数组）

如果需要在原数组上直接修改（而非创建新数组），可以结合findIndex和splice：

const targetName = "Account";
// 选择要操作的分组
const targetGroup = myData[0];
// 找到目标对象的索引
const targetIndex = targetGroup.items.findIndex(item => item.name === targetName);
// 找到索引后删除该元素
if (targetIndex !== -1) {
  targetGroup.items.splice(targetIndex, 1);
}

这种方式直接修改原数组结构，适合需要保留原数组引用的场景。

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