在 JavaScript 中从数组中删除对象

Ashok Chapagai 2023年1月30日 2021年7月3日
  1. 在 JavaScript 中使用 splice() 方法从数组中删除对象
  2. 在 JavaScript 中使用 slice() 方法从数组中删除对象
  3. 使用 filter() 方法从数组中删除一个对象
在 JavaScript 中从数组中删除对象

在本文中,我们将学习如何从 JavaScript 数组中删除对象。本文将介绍和实现诸如 splice()slice()filter() 等方法。

在 JavaScript 中使用 splice() 方法从数组中删除对象

方法 splice() 可能是我们可以用来从数组中删除对象的最佳方法。它通过删除或替换现有元素或在适当位置添加新元素来更改数组的内容。splice() 方法的语法如下所示。

Array.splice(index, count, items1, ... , itemX)

index 选项指的是一个整数,指定在什么位置添加/删除项目。我们还可以使用负值来指定从数组末尾开始的位置。count 选项是可选的,表示要删除的项目数。items1, ..., itemX 选项也是可选的,可用于向数组添加新项目。

首先,我们声明一个名为 myArray 的数组变量,它包含数组中的三个对象。然后,在第二行,我们对数组使用 splice() 方法。我们还指出 01 作为参数。然后我们在控制台中记录数组。

最初,该数组包含三个对象。splice() 方法中的值 0 表示数组的第一个索引,即第一个对象。这意味着我们将开始从第一个索引中删除。方法中的下一个值 1 指定该方法将从起点删除一项。因此,下面的示例将删除数组中的第一个对象。

我们应该注意到 splice() 方法修改了数组;因此,我们可以使用 slice() 方法从数组中删除所需的对象,而无需更改原始数组。

代码示例:

var myArray = [{id:1, name:'John'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
myArray.splice(0,1)
console.log(myArray)

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

在 JavaScript 中使用 slice() 方法从数组中删除对象

slice() 方法返回从开始到结束选择的数组部分的修改副本,但不会包括传递给该方法的结束索引。slice() 方法的语法如下。

Array.slice(startIndex, endIndex)

在这里,startIndex 是我们开始提取的从零开始的索引。可以使用负索引,它表示距序列末尾的偏移量。例如,slice(-3) 提取序列中的最后三个元素。如果 startIndex 未定义,则 slice() 函数从索引 0 开始,而如果 startIndex 大于数组的索引范围,则返回一个空数组。

endIndex 选项也是一个从零开始的索引,在该索引之前结束提取。slice() 方法最多提取 endIndex,但包括 endIndex 本身。如果排除 endIndex 选项,slice() 函数从序列的末尾提取,即提取到 array.length。如果 endIndex 大于序列的长度,slice() 函数也会提取到序列的末尾。

下面示例中的 slice(1,3) 方法将从第二个索引到第四个索引中提取元素。由于数组中没有第四个索引,它将提取元素直到序列结束。

代码示例:

var myArray = [{id:1, name:'Morty'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

使用 filter() 方法从数组中删除一个对象

filter() 方法使用通过函数提供的测试的元素创建一个新数组。这意味着它将返回一个新的对象数组。如果没有元素通过测试,该函数将返回一个空数组。我们将使用箭头函数来演示 filter() 方法。

filter() 方法使用了一个叫做回调函数的术语,就像

var newArray = myArray.filter( (element, index, array) => {
... Items passing this condition will be added to the new array...
})

该方法接受三个参数。element 选项是数组中正在处理的当前元素。index 是可选的,表示数组中正在处理的当前元素的索引。最后,array 选项是调用的数组过滤器并且是可选的。

首先,按照上述方法创建一个包含对象的数组。然后使用数组变量调用 filter() 函数。指定 item 作为箭头函数的参数,并使用表达式 item.id ! == 1 返回数组的元素。将新数组存储在 newArray 变量中并将其记录在控制台中。

下面的示例仅返回 id 不等于值 1 的数组元素。因此,它返回数组的第二个和第三个元素。

示例代码:

var myArray = [{id:1, name:'Morty'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相关文章 - JavaScript Array