在 JavaScript 中从数组中删除对象
在本文中,我们将学习如何从 JavaScript 数组中删除对象。本文将介绍和实现诸如 splice()
、slice()
和 filter()
等方法。
方法 splice()
可能是我们可以用来从数组中删除对象的最佳方法。它通过删除或替换现有元素或在适当位置添加新元素来更改数组的内容。splice()
方法的语法如下所示。
Array.splice(index, count, items1, ... , itemX)
index
选项指的是一个整数,指定在什么位置添加/删除项目。我们还可以使用负值来指定从数组末尾开始的位置。count
选项是可选的,表示要删除的项目数。items1, ..., itemX
选项也是可选的,可用于向数组添加新项目。
首先,我们声明一个名为 myArray
的数组变量,它包含数组中的三个对象。然后,在第二行,我们对数组使用 splice()
方法。我们还指出 0
和 1
作为参数。然后我们在控制台中记录数组。
最初,该数组包含三个对象。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'}]
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()
方法使用了一个叫做回调函数的术语,就像
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'}]
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。