在 JavaScript 中將陣列拆分為塊

Sahil Bhosale 2023年1月30日 2021年7月3日
  1. 使用 JavaScript 中的 slice() 方法拆分陣列
  2. 在 JavaScript 中使用 slice() 方法和 forEach 迴圈分隔陣列的每個元素
在 JavaScript 中將陣列拆分為塊

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

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

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

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

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

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

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

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 陣列,我們將獲得包含所有元素的整個陣列作為輸出。

引數 startend 都是可選的。如果你不指定 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),依此類推,直到到達陣列的末尾。

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

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

相關文章 - JavaScript Array