JavaScript如何从嵌套对象数组中移除指定对象项？

问题描述 #

需要从如下嵌套对象数组的rules数组中，通过ruleId移除指定对象项：

[
    {
        "featureID": "e0152c71-657f-4bc2-b7f5-77e4d5a2a5a0",
        "feature": "TestTwo",
        "type": "TestTwo",
        "rules": [
            {
                "ruleId": "89919182-feb1-402c-b9ad-03ae62586f84",
                "ruleName": "Machine Guarding",
                "featureName": "TestTwo",
                "parameters": []
            },
            {
                "ruleId": "e5361f7f-d8ae-424d-b781-a01987111181",
                "ruleName": "Eye&Face Protection",
                "featureName": "TestTwo",
                "parameters": []
            }
        ]
    },
    {
        "featureID": "67d6e1bf-3919-4dcc-b636-236ab41d431b",
        "feature": "TestThree",
        "type": "TestThree",
        "rules": [
            {
                "ruleId": "4e00e08e-6a34-47cf-9012-0800bc0063f2",
                "ruleName": "Maximum People",
                "featureName": "TestThree",
                "parameters": []
            },
            {
                "ruleId": "a9ab3ce2-e69c-4c0c-b561-1107baed1e68",
                "ruleName": "Redzone",
                "featureName": "TestThree",
                "parameters": []
            }
        ]
    }
]

例如要移除ruleName为Machine Guarding的项，尝试了以下代码但未生效：

deleteItems(argId){
    this.done.find((items,d)=>items.feature == argID.featureName).rules.filter((int,ind)=>int.ruleId == argID.ruleId)
}

原代码问题分析 #

• filter方法不会修改原数组，仅返回符合条件的新数组，代码未将新数组赋值回原rules属性，所以原数据无变化。
• 变量名大小写不一致：参数是argId，内部却用了argID，导致匹配逻辑失效。
• 若find未找到对应feature对象，直接访问.rules会抛出错误，缺少存在性校验。

正确实现方法 #

方法一：用filter替换原rules数组（简洁直观） #

遍历所有feature项，匹配到目标feature后，用filter过滤掉指定ruleId的项，再重新赋值给rules：

deleteItems(argId) {
  this.done.forEach(item => {
    if (item.feature === argId.featureName) {
      item.rules = item.rules.filter(rule => rule.ruleId !== argId.ruleId);
    }
  });
}

方法二：用splice直接修改原数组（保留原数组引用） #

如果需要直接在原数组上删除元素，而非替换整个数组，可使用splice：

deleteItems(argId) {
  const targetFeature = this.done.find(item => item.feature === argId.featureName);
  if (targetFeature) {
    const ruleIndex = targetFeature.rules.findIndex(rule => rule.ruleId === argId.ruleId);
    if (ruleIndex !== -1) {
      targetFeature.rules.splice(ruleIndex, 1);
    }
  }
}

调用示例 #

移除TestTwo下ruleId为89919182-feb1-402c-b9ad-03ae62586f84的项：

this.deleteItems({
  featureName: "TestTwo",
  ruleId: "89919182-feb1-402c-b9ad-03ae62586f84"
});

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