七爪源码:如何在 JavaScript 中通过 ID 从数组中删除元素

了解如何在 JavaScript 中轻松地从数组中删除具有指定 ID 的对象。

有时我们可能会使用一组具有唯一 ID 的对象，这些 ID 允许它们中的每一个在其他对象中被唯一标识。

例子

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Peter' },
  { id: 3, name: 'Kate' },
];

如果我们想从数组中删除一个具有特定 ID 的对象怎么办？ 我们将在本文中学习多种方法。

1.for循环中的数组splice()方法

要在 JavaScript 中通过 ID 从数组中删除元素，我们可以使用 for 循环将数组中每个对象的 ID 与指定的 ID 进行比较。 如果一个对象的 ID 匹配，我们可以调用数组的 splice() 方法，传递对象的索引和 1 作为参数从数组中删除对象。

例子

function removeObjectWithId(arr, id) {
  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i];
    if (obj.id === id) {
      arr.splice(i, 1);
      i--;
    }
  }  return arr;
}const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];removeObjectWithId(arr, 2);// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);

我们使用传统的 for 循环遍历数组并访问每个元素。 在循环中，我们使用 if 语句来检查当前索引的元素的 id prop 是否与指定的 ID 相同。 如果是，我们在数组上调用 splice() 方法。

Array splice() 方法通过删除现有元素同时添加新元素来更改数组的内容。

例子

const arr1 = ['a', 'b', 'c'];// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]

此方法接受三个参数：

1. start - 开始更改数组的索引。
2. deleteCount - 从开始删除的元素数
3. item1, item2, ... - 要添加到数组的可变数量的元素，从 start 开始。

我们指定 deleteCount 为 1 和目标索引的开始，以使 splice() 仅从数组中删除具有该索引的对象。 我们没有指定更多参数，因此没有任何内容添加到数组中。

避免副作用

Array splice() 方法改变传递的数组。 这给我们的 removeObjectWithId() 函数带来了副作用。 为避免修改传递的数组并创建纯函数，请制作数组的副本并在副本上调用 splice()，而不是原来的

function removeObjectWithId(arr, id) {  // Making a copy with the Array from() method
  const arrCopy = Array.from(arr);  for (let i = 0; i < arrCopy.length; i++) {
    const obj = arrCopy[i];
    if (obj.id === id) {
      arrCopy.splice(i, 1);
      i--;
    }
  }
  return arrCopy;
}const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];const newArr = removeObjectWithId(arr, 2);// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

小费

不修改外部状态的函数（即纯函数）往往更容易预测和推理。 这使得限制程序中副作用的数量成为一种好习惯。

2. 数组 filter() 方法

我们还可以使用 filter() 方法按 ID 从数组中删除一个元素。 我们在数组上调用 filter()，传递一个回调，该回调为该数组中的每个元素返回 true，除了具有指定 ID 的对象。

例子

function removeObjectWithId(arr, id) {
  return arr.filter((obj) => obj.id !== id);
}const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];const newArr = removeObjectWithId(arr, 2);// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

Array filter() 方法创建一个新数组，其中填充了通过回调函数指定的测试的元素。 它不会修改原始数组。

例子

const arr = [1, 2, 3, 4];const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

在我们的示例中，我们设置了一个测试，即数组中的对象仅在其 id 属性不等于指定 ID 时才会通过。 这确保了具有指定 ID 的对象不包含在从 filter() 返回的新数组中。

关注七爪网，获取更多APP/小程序/网站源码资源！