JavaScript 根据对象属性删除数组元素

在JavaScript中，我们经常使用对象数组。有时候我们可能需要根据对象包含的特定属性来从数组中删除一个元素。例如，我们可能希望删除所有对象中id属性值与某个特定值相匹配的元素。在本文中，我们将讨论在JavaScript中实现这个目标的各种方法。

有几种方法可以根据对象属性来删除数组元素：

• 使用filter()方法
• 使用splice()方法
• 使用forEach()方法
• 使用reduce()方法

我们将探讨上述方法来实现根据对象属性删除数组元素的目标。

方法1：使用filter()方法

filter()方法非常有用，如果你希望保留原始数组并创建一个不包含要删除元素的新数组。filter()方法根据提供的函数实现的测试来创建一个新的数组，其中包含通过测试的所有元素。

array.filter(callback(element, index, array), thisArg)  

参数：

• callback： 一个最多可以接受三个参数的函数。filter() 方法会对数组中的每个元素调用该回调函数，并返回一个由回调函数返回“true”的所有元素组成的新数组。
• element： 数组中正在处理的当前元素。
• index（可选）： 数组中正在处理的当前元素的索引。
• array（可选）： 调用filter()方法的数组。
• thisArg（可选）： 在执行回调函数时要使用的对象。

示例： 在这个示例中，代码使用filter()方法从数组arr中移除id为2的对象，并记录更新后的数组。

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];
 
arr = arr.filter(item => item.id !== 2);
 
console.log(arr);

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

方法2：splice()方法

splice()方法通过删除或替换现有元素和/或在原地添加新元素来更改数组的内容。

array.splice(start, deleteCount, item1, ..., itemX)  

参数：

• start： 改变数组的索引位置。如果大于数组的长度，实际的起始索引将设置为数组的长度。如果为负数，则从数组末尾开始的那么多元素。
• deleteCount（可选）： 一个整数，表示要删除的旧数组元素的数量。如果 deleteCount 为0或负数，则不删除任何元素。
• item1，…itemX（可选）： 添加到数组中的元素，从起始索引开始。如果您没有指定任何元素， splice() 仅从数组中删除元素。

示例： 以下代码演示了 forEach() 方法。在这个例子中，我们使用 forEach() 方法迭代数组。在回调函数内部，我们检查当前元素的’id’属性是否与要删除的值匹配。如果匹配，我们使用 splice() 方法从数组中删除该元素。由于我们在迭代数组时对其进行修改，我们需要使用索引参数确保删除正确的元素。最后，我们将更新后的数组记录到控制台。

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];
 
arr.forEach((item, index) => {
    if (item.id === 2) {
        arr.splice(index, 1);
    }
});
 
console.log(arr);

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

方式3：

使用 forEach() 方法，对数组中的每个元素执行一次提供的函数。

array.forEach(callback(currentValue, index, array), thisArg)  

参数：

• callback： 接受最多三个参数的函数。forEach()方法在数组中的每个元素上调用回调函数。
• currentValue： 正在处理的当前元素的值。
• index（可选）： 正在处理的当前元素的索引。
• array（可选）： 调用forEach()的数组。
• thisArg（可选）： 在执行回调时使用的对象。

示例： 以下代码演示了splice()方法。在此示例中，我们使用for循环来迭代数组。在循环内部，我们检查当前元素的”id”属性是否与我们要删除的值匹配。如果匹配，我们使用splice()方法从数组中删除该元素。我们还递减索引变量以确保我们不跳过任何元素。最后，我们将更新后的数组记录到控制台。

Javascript

let arr = [{
    id: 1,
    name: 'John'
}, {
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
}, {
    id: 4,
    name: 'Alice'
}
];
 
for (let i = 0; i < arr.length; i++) {
    if (arr[i].id === 2) {
        arr.splice(i, 1);
        i--;
    }
}
 
console.log(arr);

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

方法4：使用reduce()方法

在这种方法中，我们使用reduce()方法根据特定的属性值从数组中移除一个对象：

语法：

array.reduce( function(total, currentValue, currentIndex, arr),   
initialValue )  

例子： 在这个例子中，我们使用reduce()来遍历arr。将id不等于2的对象推入acc，从而产生一个更新后的数组，不包含id为2的对象。

Javascript

let arr = [
    {
        id: 1,
        name: 'John'
    },
    {
        id: 2,
        name: 'Jane'
    },
    {
        id: 3,
        name: 'Bob'
    },
    {
        id: 4,
        name: 'Alice'
    }
];
 
let idToRemove = 2;
 
arr = arr.reduce((acc, item) => {
    if (item.id !== idToRemove) {
        acc.push(item);
    }
    return acc;
}, []);
 
console.log(arr);

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]

通过利用适当的方法，您可以高效地从数组中移除不需要的元素并根据需要操纵数据。