迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 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 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

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

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便