JavaScript:配列内の要素を指定した要素数毎に分割する方法

Tips

JavaScript:配列内の要素を指定した要素数毎に分割する方法

JavaScriptで配列内にある要素を指定した数毎に複数の配列へ分割する方法です。
動きとしてはPHPのarray_chunk()のイメージで、実行後は指定した要素数が格納された配列をまとめた配列(二次元配列)が作られます。

コードはreduce()slice()を用いた下記になり、使用時は第1引数に対象となる配列を、第2引数には分割数(ひとつの配列にいくつ要素を入れるか)をそれぞれ指定します。

JavaScript

const arrayChunk = ([...array], size = 1) => {
  return array.reduce((acc, value, index) => index % size ? acc : [...acc, array.slice(index, index + size)], []);
}

下記サンプルコードの前者3つがひとつの配列内にある要素を指定した数毎に分割、後者3つが複数の配列内の要素を指定した数毎に分割したものになり、実行時に要素数が指定した数で割り切れなかった場合は余り要素での配列が作られます。

JavaScript

const array01 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      array02 = [11, 12, 13, 14, 15];

console.log(arrayChunk(array01, 3));
// [
//   [1, 2, 3]
//   [4, 5, 6]
//   [7, 8, 9]
//   [10]
// ]

console.log(arrayChunk(array01, 5));
// [
//   [1, 2, 3, 4, 5]
//   [6, 7, 8, 9, 10]
// ]

console.log(arrayChunk(array01, 7));
// [
//   [1, 2, 3, 4, 5, 6, 7]
//   [8, 9, 10]
// ]

console.log(arrayChunk([...array01, ...array02], 3));
// [
//   [1, 2, 3]
//   [4, 5, 6]
//   [7, 8, 9]
//   [10, 11, 12]
//   [13, 14, 15]
// ]

console.log(arrayChunk([...array01, ...array02], 5));
// [
//   [1, 2, 3, 4, 5]
//   [6, 7, 8, 9, 10]
//   [11, 12, 13, 14, 15]
// ]

console.log(arrayChunk([...array01, ...array02], 7));
// [
//   [1, 2, 3, 4, 5, 6, 7]
//   [8, 9, 10, 11, 12, 13, 14]
//   [15]
// ]

Close the search window,
please press close button or esc key.