迹忆客 专注技术分享

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

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

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

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) 然后它将开始从右到左更改数组。

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

下面我们在由 5 个元素组成的 array 变量中存储了一个数字数组。在我们的例子中，我们需要删除数组的第一个元素。在这里，我们必须指定起始索引和要删除的元素数。由于我们要删除第一个元素，因此我们的起始索引将是 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）已从原始数组中成功删除。

从数组中删除第一个元素的另一种方法是使用 shift() 方法。使用 splice() 方法，你可以添加或删除数组中任何索引处的任何元素，但 shift() 方法专门用于删除 0 索引处的元素。它删除第一个元素（索引 0 处的元素）并将数组的其余元素向左移动。

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

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

最后，我们将打印 array 和 firstElement 变量。

输出：

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

我们已经看到了改变或修改原始数组的方法；现在让我们看看一些保持原始数组原样并将操作结果存储到新数组中的方法。一种这样的方法是 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() 方法将回调函数（箭头函数）作为参数。在数组的每个元素上调用此回调函数。该函数将为我们提供数组的元素及其索引。

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

输出：

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

下一个保留原始数组的方法是 slice() 方法。slice() 方法在两个位置切割数组。为此，我们必须指定开始和结束索引。start 代表我们想要开始切片数组的第一个索引，切片将在 end 之前停止一个元素。

start 和 end 中存在的任何元素（包括起始值和在结束前停止一个元素）都将插入到新数组中。这两个参数都是可选的。有关更多信息，请阅读 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_1 复制到 array_2。最后，我们将使用 console.log() 方法打印两个数组。上述代码的输出如下所示。

输出：

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