迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中从数组中删除对象

作者:迹忆客 最近更新:2023/03/10 浏览次数:

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

方法 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'}]

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'}]

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便