在 JavaScript 中从数组中删除第一个元素

JavaScript 编程语言有很多预构建方法,可以帮助我们加快开发过程。对于您可能想到的任何任务,JavaScript 中总会有一个预构建的方法来执行该特定任务。例如,对字符串进行切片、在数组中插入和删除元素、将一种数据类型转换为另一种数据类型或生成随机数等等。

同样,在处理数组时,有很多方便的方法可以帮助我们在 JavaScript 中处理和操作数组数据结构。在本文中,我们将看到三种方法,使用它们可以从数组中删除第一个元素。

JavaScript 中有两种可用的方法。一种方法会改变原始数组,第二种方法会保持原始数组不变。如果原始数组被更改后没有任何问题,请使用splice()shift方法。但是,如果您不想更改原始数组,请使用filter()andslice方法。

目录

1.通过更改JavaScript 中的原始数组来删除数组的第一个元素

1.splice()方法:

2.shift()方法:

 2.通过在JavaScript 中保持原始数组不变来删除数组的第一个元素

 1.filter()方法:

 2.slice()方法:


1.通过更改JavaScript 中的原始数组来删除数组的第一个元素

1.splice()方法:

splice()方法用于从数组中删除或替换现有元素。此方法更改或修改原始数组。该splice()方法还返回已从数组中删除的元素。如果要获取已删除的元素,还可以将该返回的元素存储到某个变量中以供进一步使用。

句法: 

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

 start参数告诉我们从哪个元素开始操作数组。可以取start正值或负值。如果您使用正值 (1, 2, 3...., n),那么它将开始从左到右更改数组,如果您使用负值 (-1, -2, -3, ..., -n) ) 然后它将开始从右到左更改数组。

然后我们还有deleteCountitem1, item2, ...参数,这两个都是可选的。如果要从数组中删除某些元素,可以将要删除的元素的总数作为值传递给deleteCount参数。如果通过0,则不会从数组中删除任何元素。您可以在item1, item2, ...其中传递要添加到数组的元素。有关更多信息,请阅读 splice()方法文档。

下面我们有一个数字数组存储在由元素组成的array变量中。5在我们的例子中,我们需要删除数组的第一个元素。在这里,我们必须指定开始索引和要删除的元素数量。由于我们要删除第一个元素,因此我们的起始索引是0,我们需要删除的总元素是1。因此,我们将值(0, 1)作为参数传递给splice()方法。

let array = [1,2,3,4,5]
let firstElement = array.splice(0, 1);
console.log(array, firstElement);

 我们还将从数组中删除的元素存储到一个名为 的变量firstElement中。从数组中删除第一个元素后,我们将打印array存储在firstElement变量中的值和值。

您可以通过将上面的代码粘贴到浏览器的控制台来运行上面的代码,然后您将获得如下输出。

输出:

Array(4) [ 2, 3, 4, 5 ]
Array [ 1 ]

 从输出中可以看出,在这种情况下,第一个元素1已成功从原始数组中删除。

2.shift()方法:

从数组中删除第一个元素的另一种方法是使用shift()方法。使用该splice()方法,您可以在数组的任何索引处添加或删除任何元素,但该shift()方法专门用于0仅删除索引处的元素。它删除第一个元素(存在于 index 处0的元素)并将数组的剩余元素移动到左侧。

此方法还返回已从数组中删除的元素。在这里,我们还创建了一个firstElement变量,它将存储从数组中删除的第一个元素。

let array = [1,2,3,4,5];
let firstElement = array.shift();
console.log(array, firstElement);

 最后,我们将打印arrayfirstElement变量。

输出:

Array(4) [ 2, 3, 4, 5 ]
1

 2.通过在JavaScript 中保持原始数组不变来删除数组的第一个元素

 1.filter()方法:

我们已经看到了改变或修改原始数组的方法;现在让我们看看一些保持原始数组不变并将操作结果存储到新数组中的方法。一种这样的方法是filter()方法。

filter()方法根据条件起作用。并根据条件是真还是假,决定是否将元素添加到新数组中。

let array_1 = [1,2,3,4,5];
let array_2 = array_1.filter((element, index) => index > 0);
console.log(array_1, array_2);

filter()方法将回调函数(箭头函数)作为参数。对数组的每个元素调用此回调函数。该函数将为我们element提供数组的 及其index

由于我们要删除第一个元素,我们将添加一个条件,即元素的索引是否大于零(index > 0)。如果这是真的,那么只有filter()函数会将元素插入到新数组中,否则不会。0除了索引处的元素(即第一个元素)之外,所有其他元素都将插入到新数组中。

输出:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]

 2.slice()方法:

下一个保留原始数组的方法是slice()方法。该slice()方法在两个位置切割数组。为此,我们必须指定开始和结束索引。start表示我们要开始对数组进行切片的第一个索引,切片将在end.

startand中存在的任何元素end(包括起始值和结束前的一个元素)都将插入到新数组中。这两个参数都是可选的。有关更多信息,请阅读slice()slice()方法文档。

let array_1 = [1,2,3,4,5];
let array_2 = array_1.slice(1);
console.log(array_1, array_2);

 我们将只传递start参数,因为我们想从数组中删除第一个元素。不指定end意味着start将包含从该值开始的数组的所有元素。在我们的例子中,我们将通过slice(1)[2,3,4,5]这会将原始数组中的元素复制array_1array_2console.log()最后,我们将使用该方法打印两个数组。上述代码的输出如下所示。

输出:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值