从含对象的JS数组提取特定值：Todo应用删除任务时splice表现如shift的问题解法

核心错误定位 #

你现在遇到的两个典型现象——删除逻辑乱触发、splice表现和shift完全一样——都是三个具体代码错误导致的，没有什么玄学问题：

• 点击判断逻辑存在基础语法错误：你写的判断语句if ((event.target.className = "del-btn"))是赋值操作而非相等判断，既会把所有被点击元素的类名强制改成del-btn，也会因为赋值返回的非空字符串永远为真值，导致不管点列表哪个位置都会触发删除逻辑。
• splice传参完全不符合方法要求：splice的第一个参数需要传入待删除元素在原数组中的数字索引，但你这里传入的是filter方法返回的新数组。JS在处理非数字的splice索引参数时，会强制把数组转成数字，转换失败得到的NaN会被默认当作0处理，所以不管点哪个删除按钮，都是从数组第0位删元素，和shift()删首元素的表现完全一致。
• 缺少DOM同步逻辑：就算数组里的元素被删掉了，你之前的代码没有同步移除对应的页面li节点，会导致页面显示和实际数组状态不一致。

修正后的可运行代码 #

// 替换原来的列表点击监听逻辑
list.addEventListener("click", (event) => {
    // 用classList判断是否为删除按钮，避免多类名场景下className判断失效
    if (event.target.classList.contains("del-btn")) {
        const targetId = parseInt(event.target.id);
        // 用findIndex拿到匹配任务在原数组中的真实索引
        const todoIndex = todoList.findIndex(item => item.id === targetId);
        // 做边界判断，索引存在时再执行删除
        if (todoIndex !== -1) {
            // 删除数组中对应位置的任务
            todoList.splice(todoIndex, 1);
            // 同步移除页面对应的列表节点
            event.target.closest(".todoListItems").remove();
        }
    }
});

适合Todo应用的替代实现方案 #

• 更不易出错的数组删除方式：可以跳过找索引的步骤，直接用filter生成新数组覆盖原任务列表，从根源避免splice传参错误，写法是todoList = todoList.filter(item => item.id !== targetId)，这种不可变更新的思路也是现代前端框架处理状态的通用方式。
• 更高性能的存储结构：如果Todo任务量较大，可以用Map替代普通数组存储任务，以任务id为键、任务对象为值，删除时直接调用todoMap.delete(targetId)，不需要遍历整个数组，操作时间复杂度从O(n)降到O(1)。
• 更稳定的渲染逻辑：可以把DOM渲染从新增任务的逻辑里抽离出来，每次任务数组变化时就重新渲染整个列表，避免单独操作单个DOM节点导致的状态不同步问题。

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