在 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);
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP