使用splice()删除JavaScript数组指定对象时运行异常如何解决？

问题原因 #

• splice() 是原地修改数组的方法，执行后会直接修改原数组内容，它的返回值是被删除元素组成的数组，而非修改后的原数组。你代码中将 MyArr 直接赋值为 splice() 的返回值，相当于把原数组替换成了仅包含被删除对象的数组，才会出现除目标对象外其他元素全部丢失的问题。
• 代码逻辑存在冗余：你已经通过 findIndex() 拿到了目标元素的下标，不需要额外写 for 循环再次遍历匹配元素。

修正方案 #

直接调用 splice() 删除对应下标的元素即可，不需要对 MyArr 重新赋值，同时可以删掉冗余的循环逻辑，注意增加下标合法性判断避免误删：

var MyArr = [
    {
        "id": "139",
        "count": 2,
    },
    {
        "id": "138",
        "count": 2,
    },
    {
        "id": "196",
        "count": 1,
    },
    {
        "id": "122",
        "count": 1,
    }
]

console.log(MyArr);
var linkItemId = parent.find("a").attr("data-menu-id");
var indexItem = MyArr.findIndex(x => x.id == linkItemId);
// 确认找到目标元素再执行删除，避免下标为-1时误删最后一个元素
if (indexItem !== -1) {
  MyArr.splice(indexItem, 1);
}

可选替代方案 #

如果你不想修改原数组，可以用filter方法生成新数组实现删除效果：

// 过滤掉id匹配的元素，直接生成新的目标数组
MyArr = MyArr.filter(x => x.id !== linkItemId);

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