了解如何在 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' ]
此方法接受三个参数：
- start - 开始更改数组的索引。
- deleteCount - 从开始删除的元素数
- 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/小程序/网站源码资源！
