如何替换JavaScript数组中的对象及splice返回空数组问题排查

核心问题出在splice方法的使用上：
Array.prototype.splice()是会直接修改原数组的实例方法，它的返回值是本次操作被删除的元素组成的数组。你代码中调用splice时第二个参数传了0，代表本次操作不删除任何元素，因此返回值是空数组，你将这个空数组直接赋值给了updatedTodo变量，最终就得到了空数组。

方案1：更简洁的不可变更新（推荐） #

不需要先删后插，直接通过map方法遍历数组匹配目标项更新即可，逻辑简单且不会出现索引错位问题：

const updatedTodos = oldTodos.map(todo => {
  // 匹配到目标id时返回更新后的对象
  if (todo.id === getTodoId) {
    return { ...todo, isCompleted: !getStatus }
  }
  // 非目标项直接返回原对象
  return todo
})

方案2：原有先删后插思路的修正版 #

如果要保留你现有的实现思路，只需要去掉splice的赋值操作即可，splice会直接修改updatedTodo数组，不需要重新赋值：

let thisTodoIndex = oldTodos.findIndex((t) => t.id === getTodoId);
let thisTodo = oldTodos[thisTodoIndex];
thisTodo = { ...thisTodo, isCompleted: !getStatus };

let updatedTodo = oldTodos.filter(td => td.id !== getTodoId);
// 直接调用splice即可，不要把返回值赋值给updatedTodo
updatedTodo.splice(thisTodoIndex, 0, thisTodo);

console.log(updatedTodo); // 输出正确的更新后数组

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