JS按值从数组中删除项目 - Javascript

有时候需要从数组中删除某个特定的元素。这种情况下，可以使用 JavaScript 中的 splice() 方法。该方法可以删除数组中的元素，并且可以在需要的位置插入新元素。本文将介绍如何使用 splice() 方法按值从数组中删除项目。

代码示例

下面是一个例子，展示了如何使用 splice() 方法删除一个数组中的元素。

const array = ['apple', 'banana', 'orange', 'grape'];

// 删除 'orange' 元素
const index = array.indexOf('orange');
if (index > -1) {
  array.splice(index, 1);
}
console.log(array); // => ["apple", "banana", "grape"]

在上面的代码中，我们首先定义了一个包含 4 个水果名称的数组。然后，我们使用 indexOf() 方法找到要删除的元素的索引位置。如果数组中没有该元素，indexOf() 方法会返回 -1。否则，indexOf() 方法会返回该元素在数组中的索引位置。

一旦我们知道要删除元素的索引位置，我们就可以使用 splice() 方法删除该元素。splice() 方法的第一个参数是要删除或插入的元素的索引位置。在本例中，我们将其设置为 index。第二个参数是要删除的元素的数量。在本例中，我们要删除一个元素，因此将其设置为 1。

最后，我们打印修改后的数组。可以看到，已成功删除了 'orange' 元素。

对象数组示例

如果数组包含对象，则需要根据对象的某个属性值进行匹配。下面是一个包含人员信息的对象数组的代码示例。

const people = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Sally' },
];

// 按 ID 删除对象
const idToDelete = 3;
const index = people.findIndex(person => person.id === idToDelete);
if (index > -1) {
  people.splice(index, 1);
}
console.log(people); // => [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 4, name: "Sally" }]

在上面的代码中，我们首先定义了一个包含 4 个人员信息的对象数组。然后，我们使用 findIndex() 方法找到具有特定 ID 的对象。该方法接受一个回调函数，该函数接受一个对象并返回一个布尔值。如果回调函数返回 true，则 findIndex() 方法返回该对象在数组中的索引位置。

一旦我们知道要删除的对象的索引位置，我们就可以使用 splice() 方法删除该对象。与数组中的元素一样，splice() 方法的第一个参数是要删除或插入的元素的索引位置。第二个参数是要删除的元素的数量。在本例中，我们要删除一个元素，因此将其设置为 1。

最后，我们打印修改后的数组。可以看到，已成功删除具有 ID 为 3 的对象。

结论

如您所见，使用 splice() 方法按值从数组中删除项目是相当简单的。只需找到要删除元素的索引位置，然后使用 splice() 方法删除它即可。

Happy coding!