14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】配列を分割して配列を生成する

Last updated at Posted at 2021-03-21

#はじめに
配列の要素を任意の個数で分割したいと思ったときに、既に記事にしていた方がいました。
ナレッジ共有に感謝しかありません。ありがとうございます。
本記事の最後に出典としてURLを貼っておきます。
この記事の目的として自分の知識の整理のための記事のため、もっと詳細な説明を知りたい場合は、出典元の記事を参照していただければと思います。

#配列を任意の個数の配列に分割する関数
以下が配列を任意の個数の配列に分割する関数になります。
何をやっているかを説明していきます。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sliceByNumber = (array, number) => {
  // 元の配列(今回で言うと変数arrayを指します)を基に、分割して生成する配列の個数を取得する処理です。
  // 今回は元の配列の要素数が10個、分割して生成する配列は2つの要素を持つことを期待しています。
  // 上記のことから今回は、元の配列から5つの配列に分割されることになります。
  const length = Math.ceil(array.length / number);

  // new Arrayの引数に上記で取得した配列の個数を渡します。これで配列の中に5つの配列が生成されます。
  // 5つの配列分だけループ処理(mapメソッド)をします。map処理の中でsliceメソッドを使用して、元の配列から新しい配列を作成して返却します。
  // sliceメソッドの中では、要素数2つの配列を生成します。
  // fillメソッドはインデックスのキーを生成するために使用しています。もし使用しない場合はmapメソッドはindexがないため、mapメソッドが機能しません。
  return new Array(length)
    .fill()
    .map((_, i) => array.slice(i * number, (i + 1) * number));
};

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

#終わりに
今回参考にさせて頂いた記事では、詳細な説明までありとても参考になりました。
改めてありがとうございます。
僕も他の人のナレッジ共有できるように詳細で分かりやすい記事を書いていきたいと思います。

#参考サイト
http://yucatio.hatenablog.com/entry/2019/12/10/222311

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?