javascript - 从数组中删除元素(待办事项列表应用程序)

Question

我正在创建一个非常基本的待办事项列表应用程序，我从 Youtube 复制了这个想法(仍在学习 JS)。因此，每次添加新的待办事项时，它都会存储在一个数组中(只是您键入的文本以及是否完成)并添加了 HTML 元素，直到这里一切都很好。

当我尝试从数组中删除该元素时，问题就开始了。每个项目(待办事项)都有一个 ID，它基本上是它存储在数组中的索引，所以我编码 array.splice(item.id, 1)如果你耐心地一个一个地删除项目，它效果很好，但是如果你更快地点击删除按钮，数组中删除的项目不匹配，就像传递的索引搞砸了一样。我想知道我是否可以等待直到当前的 delete() 函数结束或类似的东西。顺便说一句，列表容器有一个 eventListener，如果单击任何项​​目的删除按钮，它会运行 delete() 函数通过 e.target.parentElement 传递该项目。 (这是项目容器)。

我想要一个 localeStorage 的数组。谢谢!

第一次发帖，英语不是我的母语，如有任何错误，请见谅。

Answer 1

很好的问题。所以.splice()确实是您要调用的 Array 方法，但它并没有完全使用您期望的语法。

首先，我将向您指出 MDN 文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

MDN 由 Mozilla 管理，是浏览器 javascript 中大多数内容的权威来源。如果您刚刚开始使用 javascript，那么该资源将非常宝贵。 MDN 文档是一些最好的书面技术文档，主要是为了让语言经验最少的人能够理解它们。

话虽如此，让我们回顾一下 Array.splice 实际在做什么。

所以你有一系列的待办事项:

const todos = [] // Array of to-dos

您想删除其中一个待办事项，并且您有权访问该 ID。我将假设您的 Todos 具有与此类似的形状:

const todo = {
 id: 1 // number
 name: 'my todo' // string
 description: 'my todo description' // string
}

为了从此数组中删除元素，给定要删除的项目的 id，您实际上需要执行以下操作:

1) 在待办事项的数组中找到具有您要查找的 id 的位置。
2) 使用您刚刚找到的索引将该元素从数组中拼接出来。

让我们看看如何做到这一点:

function removeItemFromTodos(itemId, todos) {
  // find the index of the todo with the id you are looking for
  const indexOfTodoToDelete = todos.findIndex((todoInArray) => todoInArray.id === itemId));
  // remove that todo:
  todos.splice(indexOfTodoToDelete, 1) // delete the todo
} 

好的，让我们解开它:
首先， findIndex 方法循环遍历数组。它将从索引 0 开始，一直工作直到到达数组的末尾。如果它当前正在查看的项目的 id 与我们正在查找的 id 匹配，则该函数将立即返回该待办事项在数组中的位置的索引，并停止在数组中搜索。

获得索引后，您可以删除该项目。 splice 函数将要开始切割元素的位置作为第一个参数，将要切割的元素数量作为第二个参数。 splice 方法返回 的元素已删除 .所以它实际上是在原地改变数组，而不是在内存中复制它来执行它的操作。

如果此解决方案对您不起作用或不清楚，请告诉我!