JavaScript で配列をチャンクに分割する

JavaScript では、配列を操作したり、配列内での挿入、削除、データ操作など、配列に対してさまざまな操作を実行したりすることは、すべてのプログラマーが知っておくべき非常に一般的なことです。

JavaScript 言語は、配列データ構造を操作および変更できるさまざまな素晴らしい組み込み関数を提供することで、私たちの生活をはるかに楽にします。この記事で説明するそのようなメソッドの 1つは、slice() 関数です。この方法を使用すると、配列全体をさまざまなチャンクに簡単に分割または分割できます。

JavaScript の slice() メソッドを使用して配列を分割する

slice() メソッドは、配列を小さなチャンクにスライスまたは分割するために使用されます。この関数は、入力として start と end の 2つのパラメーターを取ります。start は、配列のスライスを開始する開始インデックスを表し、end は、スライスまたは分割を停止するインデックスを表します。

このプロセスでは、スライスにより、指定した end インデックスの前の 1つのインデックスが停止することに注意してください。たとえば、end を 5 として定義した場合、メソッドは 1つのインデックスのスライスを停止します。つまり、インデックス 4 になります。

スライスが完了した後、元の配列は変更されません。最新のブラウザはこの方法をサポートしています。

以下のコード例では、integers タイプの numbersArr という配列があります。start および end パラメーターを渡して、この配列を分割または分割できます。ここでは、start および end パラメーターとして 2 および 5 を渡しました。

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 の前に 1つのインデックスがあるため、要素番号 5 になります。したがって、slice() メソッドはこの配列を分割し、出力を [3, 4, 5] として取得します。すでに説明したように、元の配列は変更されないままなので、numbersArr 配列を出力すると、すべての要素が出力として存在する配列全体が取得されます。

パラメータ start と end はどちらもオプションです。開始位置を指定しない場合、slice() メソッドはデフォルト値として 0 を取ります。end の位置を指定しない場合、array.length メソッドを使用して配列の最後の要素に移動します。

JavaScript の slice() メソッドと forEach ループを使用して配列のすべての要素を分離する

すべての配列要素を分割または分割するには、slice() メソッドと for ループの両方を使用できます。ここで for ループを使用することもできます—これは問題ではありません。さらに、同じ numbersArr 配列もあります。配列で forEach ループを使用する場合は常に、コールバック関数を渡す必要があります。これにより、2つのことが提供されます。1つは配列自体の要素で、もう 1つはそのインデックスです。すべての反復で、配列の各要素を調べて、それぞれのインデックスを取得します。

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 を end パラメーターとして slice() メソッドに渡します。したがって、たとえば、インデックス値が 0 の場合、index+1 は 0 + 1 = 1 になります。また、slice() メソッドは終了インデックスの前で 1つの要素を停止することがわかっているので、ここで配列のすべての要素を分割します。したがって、最初に split(0,1) を渡して、メソッドが配列から一度に 1つの要素を取得し、それを出力するようにします。

2 回目の反復では、split(1,2) になります。3 番目の反復は、配列の最後に到達するまで split(2,3) というように続きます。

このようにして、配列のすべての要素をさまざまなチャンクに分割することができます。コードの後半でこれらの個々の要素にアクセスする場合は、必要に応じて要素ごとに個別の配列を作成することで、これらの要素を保存することもできます。