在 JavaScript 中將陣列拆分為塊

在 JavaScript 中，玩陣列，對陣列進行各種操作，無論是插入、刪除還是陣列內部的資料操作，都是每個程式設計師都應該知道的非常常見的事情。

JavaScript 語言為我們提供了各種很棒的內建函式，讓我們可以玩弄和修改陣列資料結構，從而使我們的生活變得更加輕鬆。我們將在本文中討論的一種方法是 slice() 函式。使用這種方法，我們可以輕鬆地將整個陣列劃分或拆分為不同的塊。

使用 JavaScript 中的 slice() 方法拆分陣列

slice() 方法用於將陣列切片或劃分為更小的塊。該函式接受兩個引數作為輸入，start 和 end。start 表示你想要開始切片陣列的起始索引，而 end 表示你想要停止切片或分割的索引。

在此過程中，請注意切片將在你指定的 end 索引之前停止一個索引。例如，如果你已將 end 定義為 5，該方法將停止對之前的一個索引進行切片，即在索引 4 處。

切片完成後，原始陣列保持不變。現代瀏覽器支援這種方法。

在下面的程式碼示例中，我們有一個名為 numbersArr 的陣列，它屬於 integers 型別。我們可以傳遞 start 和 end 引數來拆分或劃分這個陣列。在這裡，我們傳遞了 2 和 5 作為 start 和 end 引數。

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbersArr.slice(2, 5));
console.log('Original Array: ', numbersArr);

輸出：

[3, 4, 5]
Original Array: [1, 2, 3, 4, 5, 6, 7, 8]

由於在索引 2 處，我們有元素編號 3，而在索引 5 之前有一個索引，因此我們有一個元素編號 5。因此，slice() 方法將拆分這個陣列，我們將得到輸出為 [3, 4, 5]。如前所述，原始陣列保持不變，因此如果我們列印 numbersArr 陣列，我們將獲得包含所有元素的整個陣列作為輸出。

引數 start 和 end 都是可選的。如果你不指定 start 位置，則 slice() 方法將採用 0 作為其預設值。如果你不指定 end 位置，它將在 array.length 方法的幫助下轉到陣列的最後一個元素。

在 JavaScript 中使用 slice() 方法和 forEach 迴圈分隔陣列的每個元素

要分割或拆分所有陣列元素，我們可以同時使用 slice() 方法和 for 迴圈。你也可以在這裡使用 for 迴圈——這不是問題。此外，我們還有相同的 numbersArr 陣列。每當我們在陣列上使用 forEach 迴圈時，我們必須傳遞迴調函式，它將為我們提供兩件事：第一個是陣列本身的元素，第二個是它的索引。在每次迭代中，我們將遍歷陣列的每個元素並獲取其各自的索引。

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

numbersArr.forEach((value, index) => {
  console.log(numbersArr.slice(index, index + 1));
});

輸出：

[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
[ 5 ]
[ 6 ]
[ 7 ]
[ 8 ]

我們將把 index 值作為 start 引數和 index+1 作為結束引數傳遞給 slice() 方法。因此，例如，如果索引值為 0，則 index + 1 變為 0 + 1 = 1。我們知道 slice() 方法會在結束索引之前停止一個元素，我們想在這裡拆分陣列的每個元素；因此，我們最初將傳遞 split(0,1)，以便該方法一次從陣列中取出一個元素並列印它。

在第二次迭代中，它將是 split(1,2)。第三次迭代將是 split(2,3)，依此類推，直到到達陣列的末尾。

這樣，我們將能夠將陣列的每個元素拆分為不同的塊。如果你想稍後在程式碼中訪問這些單獨的元素，你還可以通過根據需要為每個元素建立單獨的陣列來儲存這些元素。