在 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'}]
相关文章
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 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。