在 JavaScript 中從陣列中刪除第一個元素

1. 在 JavaScript 中通過更改原始陣列來刪除陣列的第一個元素
2. 在 JavaScript 中通過保持原始陣列不變來移除陣列的第一個元素

JavaScript 程式語言有很多預構建方法，可以幫助我們加快開發過程。對於你可能想到的任何任務，JavaScript 中總會有一個預先構建的方法來完成該特定任務。例如，對字串進行切片、從陣列中插入和刪除元素、將一種資料型別轉換為另一種資料型別或生成隨機數等等。

同樣，在處理陣列時，有很多方便的方法可以幫助我們在 JavaScript 中工作和運算元組資料結構。在本文中，我們將看到可以使用三種方法從陣列中刪除第一個元素。

JavaScript 中有兩種可用的方法。一種方法會改變原陣列，第二種方法會保持原陣列不變。如果原始陣列被更改後沒有任何問題，請使用 splice() 和 shift 方法。但是，如果你不想更改原始陣列，請使用 filter() 和 slice 方法。

在 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) 然後它將開始從右到左更改陣列。

然後我們還有 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）已從原始陣列中成功刪除。

2. shift() 方法：

從陣列中刪除第一個元素的另一種方法是使用 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

在 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() 方法將回撥函式（箭頭函式）作為引數。在陣列的每個元素上呼叫此回撥函式。該函式將為我們提供陣列的元素及其索引。

由於我們要刪除第一個元素，我們將新增一個條件，即元素的索引是否大於零（index > 0）。如果這是真的，那麼只有 filter() 函式會將元素插入到新陣列中，否則不會。除了索引 0 處的元素（即第一個元素）之外，所有其他元素都將插入到新陣列中。

輸出：

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

2. slice() 方法：

下一個保留原始陣列的方法是 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 ]