在 JavaScript 中將陣列分割成塊


本文的任務是在 JavaScript 中將給定的陣列元素分割成 n 個大小的塊。我們有一些方法可以對陣列執行分割操作,這些方法將在下面討論。

讓我們假設一些簡單的輸入和輸出場景 

假設有一個包含元素的陣列。例如,陣列 = [10, 20, 30, 40],我們取塊大小為 2。

Input = [10, 20, 30, 40]
Ouput = [[10, 20], [30, 40]]

元素將被分成兩個塊,第一個引數指定起始索引,第二個引數指定結束索引。

讓我們看看下面這兩種方法 

  • 使用slice 方法和for 迴圈。

  • 使用splice 方法和while 迴圈。

使用 Slice() 方法

JavaScript 中的 slice() 方法將陣列的一部分淺複製到一個新的物件陣列中。slice() 方法是提取陣列的一部分或切片陣列的最簡單方法。

語法

以下是 JavaScript 中 slice() 方法的語法 -

slice(start, end)

這將返回呼叫的陣列在開始和結束之間的那一部分。

示例:帶有 for 迴圈的 Slice

在下面的示例中,for 迴圈與 slice 方法一起使用來將陣列元素分割成塊。我們透過迭代陣列將陣列分解成大小為 2 的塊。

function array_into_chunks (array, size_of_chunk) {
   const arr = [];
   for (let i = 0; i < array.length; i += size_of_chunk) {
      const chunk = array.slice(i, i + size_of_chunk);
      arr.push(chunk);
   }
   return arr;
}
const array = [1, 6, 7, 3, 5, 9, 4];
console.log(array_into_chunks(array, 2));

示例:帶有 while 迴圈的 Splice 方法

在下面的示例中,我們使用了while 迴圈遍歷陣列。我們在每次迭代中執行拼接操作並將每個塊推入新陣列,除非原始陣列中沒有剩餘元素,即array.length 大於 0。

function array_into_chunks (array, chunkSize) {
   const arr = [];
   while (array.length > 0) {
      const chunk = array.splice(0, chunkSize);
      arr.push(chunk);
   }
   return arr;
}
const array = [1, 6, 7, 3, 5, 9, 4];
console.log(array_into_chunks (array, 2));

注意

splice() 方法會更改原始陣列。但在 slice() 方法的情況下,它會建立原始陣列的副本。因此,原始陣列不會有任何修改。

示例 2:陣列原型中的陣列對映

map 函式會依次呼叫陣列中的每個元素一次,並根據結果建立一個新陣列。該函式將輸出一個數組,其長度由輸入陣列的長度除以塊大小決定。該陣列將首先由 fill 函式填充未定義值(因為沒有提供引數),然後每個未定義值將被一個新陣列替換(使用正確的索引對提供的陣列進行切片的結果)。

在下面的示例中,我們在陣列的原型中定義了 chunk 方法,該方法將返回一個包含給定大小的塊陣列的陣列。

Object.defineProperty(Array.prototype, 'chunk', {
   value: function(size_of_chunk) {
      var that = this;
      return Array(Math.ceil(that.length/size_of_chunk)).fill().map(function(_,i){
         return that.slice(i*size_of_chunk, i*size_of_chunk + size_of_chunk); 
      });
    }
});
var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120].chunk(4);
console.log(arr);

更新於: 2022年12月19日

2K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.