按id删除对象数组中的项目[重复]答案

【问题标题】：delete an item in an object array by id [duplicate]按id删除对象数组中的项目[重复]
【发布时间】：2021-06-29 02:23:17
【问题描述】：

我想根据它的 id 删除一个项目。我从单击的单元格中检索 id 但我不知道如何检索数组中的 id 以便能够将其与单击的 id 进行比较以仅删除选定的一个而不是所有数组，我不是确定使用哪种方法

我的 item.json

[{
    "id": "e3c387fd-7cf1-4d5b-9825-cef745c0ab99",
    "name": "item 1",
    "fans": {},
    "cell": [{
        "id": "e2021621-9c74-4960-bf47-f6ad917ee40b",
        "name": "cell 1 item 1",

      },
      {
        "id": "d5129940-716c-47a3-81b5-f2c90e69b602",
        "name": "cell 2 item 1",

      }
    ]
  },
  {
    "id": "79fe939b-4c64-4b73-bebd-6563f445920c",
    "name": "item 2",
    "fans": {},
    "cell": [{
        "id": "7b6b57c6-7b72-4a14-8932-51fc2e5f9b75",
        "name": "cell 1 item 2",

      },
      {
        "id": "b579f94f-605e-4c7a-a8c5-3aad9bfec9e2",
        "name": "cell 2 item 2",

      }
    ]
  }
]

我的功能

trashItem(id) {
  this.cellsListsData = this.cellsListsData.filter(cell => {
    cell.id === id, console.log(cell.id, id);
  });
}

【问题讨论】：

您没有从过滤器回调中返回。如果箭头函数中没有{}，则可以跳过return（隐式返回）。如果您想排除特定 ID，您的条件应该是 !== id。所以，cell => { console.log(cell.id, id); return cell.id !== id }

标签： javascript vue.js

【解决方案1】：

this.cellsListsData = this.cellsListsData.filter(function(element) {
    return element.id !== id;
  });

或者只是获取它的索引然后this.cellsListsData.splice(index, 1);

【讨论】：

【解决方案2】：

这将需要遍历整个数组并找到具有给定 id 的对象的索引。找到 id 后，您可以简单地将数组从该索引与偏移量 1 拼接起来。下面是执行此操作的快速 sn-p。

var index_to_delete;
data.forEach(function(value, index) {
   if (value.id == id_of_clicked_element) {
     index_to_delete = index;
   };
});
data.splice(index_to_delete, 1);

注意：使用过滤器将创建一个新数组。因此，如果您在其他一些变量中引用数据数组，它们将不会获得新数组。因此，我建议谨慎使用过滤器解决方案。此外，一些答案说要删除该索引处的元素。这将从数组中删除该索引，并且您的数组将呈现不一致。

【讨论】：