JavaScript で配列をチャンクに分割する 配列を指定されたサイズの小さな配列に分割することが含まれます。このプロセスは、大規模なデータセットをより効率的に管理したり、アプリケーション内でより小さく管理しやすい部分に分けてデータを処理したりする場合に役立ちます。
配列をチャンクに分割するメソッド:
目次
- JavaScriptのslice()メソッドの使用
- JavaScript splice() メソッドの使用
- Lodash _.chunk() メソッドの使用
- ループを使用して配列を分割する
- Array.reduce() の使用:
- Array.from() と Array.splice() の使用
JavaScriptのslice()メソッドの使用
の スライス()メソッド 選択された要素を含む新しい配列を返します。このメソッドは、指定された start 引数から開始して終了する要素を選択しますが、指定された end 引数は除きます。
構文：
array.slice(start, end);>
例： この例では、 スライス（） 配列を配列のチャンクに分割するメソッド。このメソッドを繰り返し使用して、任意のサイズの配列を分割できます。
JavaScript // Size of chunk let chunk = 4; // Input array let arr = [1, 2, 3, 4, 5, 6, 7, 8]; // Spiltted arrays let arr1 = arr.slice(0, chunk); let arr2 = arr.slice(chunk, chunk + arr.length); // Display Output console.log('Array1: ' + arr1 + '
Array2: ' + arr2);> 出力
Array1: 1,2,3,4 Array2: 5,6,7,8>
JavaScript splice() メソッドの使用
splice() メソッド 配列に項目を追加または配列から削除し、削除された項目のリストを返します。
構文：
array.splice(index, number, item1, ....., itemN);>
例： この例では、 スプライス（） 配列を配列のチャンクに分割するメソッド。このメソッドは、元の配列から項目を削除します。このメソッドを繰り返し使用して、任意のサイズの配列を分割できます。
img css 整列JavaScript
// Size of aaray chunks let chunk = 2; // Input array let arr = [1, 2, 3, 4, 5, 6, 7, 8]; // Splitted arrays let arr1 = arr.splice(0, chunk); let arr2 = arr.splice(0, chunk); let arr3 = arr.splice(0, chunk); let arr4 = arr.splice(0, chunk); // Display output console.log('Array1: ' + arr1); console.log('Array2: ' + arr2); console.log('Array3: ' + arr3); console.log('Array4: ' + arr4);> 出力
Array1: 1,2 Array2: 3,4 Array3: 5,6 Array4: 7,8>
使用する Lodash _.chunk() メソッド
このアプローチでは、 Lodash _.chunk() メソッド これは、指定された値に従って、指定された配列をチャンクで返します。
例： この例では、サイズ「3」を _.chunk() メソッドに渡すことで配列を分割しています。チャンクのサイズは変更でき、さまざまなデータ型の配列をチャンク関数で使用できます。
JavaScript // Requiring the lodash module // in the script let _ = require('lodash'); let arr = [1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd']; console.log('Before: ', arr) // Making chunks of size 3 console.log('After: ', _.chunk(arr, 3))> 出力：
Before: [ 1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd' ] After: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 'a', 'b', 'c' ], [ 'd' ] ]>
ループを使用して配列を分割する
このアプローチでは、元の配列を反復処理し、それを目的のサイズのチャンクにスライスし、各チャンクを新しい配列にプッシュします。
例：
JavaScript function chunkArray(array, chunkSize) { const chunks = []; for (let i = 0; i < array.length; i += chunkSize) { chunks.push(array.slice(i, i + chunkSize)); } return chunks; } const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const chunkedArray = chunkArray(arr, 4); console.log(chunkedArray);> 出力
[ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ] ]>
Array.reduce() の使用
使用する Array.reduce() 、配列を指定されたサイズのチャンクに分割します。 Reduce 関数は、chunkSize に基づいてチャンクを蓄積し、配列のスライスされた部分をチャンク配列にプッシュし、結果として得られるチャンクの配列を返します。
例： この例では、reduce メソッドを使用して配列を指定されたサイズのチャンクに分割します。配列を反復処理し、定義されたチャンク サイズのサブ配列を結果の配列にプッシュします。
JavaScript // Size of chunk let chunk = 4; // Input array let arr = [1, 2, 3, 4, 5, 6, 7, 8]; // Split array into chunks using reduce method let splittedArrays = arr.reduce((result, item, index) =>{ if (インデックス % チャンク === 0) { result.push(arr.slice(インデックス, インデックス + チャンク)); 結果を返します。 }、[]); // 出力を表示 splittedArrays.forEach((subArray,index) => { console.log(`Array${index + 1}: ${subArray}`); });>> 出力
Array1: 1,2,3,4 Array2: 5,6,7,8>
Array.from() と Array.splice() の使用
この方法では、Array.from() を使用して元の配列から新しい配列を作成し、次に splice() を使用してそこから要素を繰り返し削除してチャンクを形成します。
例： この例では、chunkArray 関数は配列を指定されたサイズのチャンクに分割します。元の配列のコピーを作成し、配列が空になるまでチャンク サイズに基づいて部分を繰り返し抽出します。
JavaScript function chunkArray(array, chunkSize) { const chunks = []; const copyArray = Array.from(array); // Create a copy of the original array while (copyArray.length>0) { chunks.push(copyArray.splice(0, chunkSize)); チャンクを返します。 } // 使用例: const arr = [1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd']; const チャンクサイズ = 3; const chunks = chunkArray(arr, chunkSize); console.log(チャンク);>> 出力
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 'a', 'b', 'c' ], [ 'd' ] ]>