[Javascript] Array.reduceを使って一次元配列をｎ個ずつに分割して新しい二次元配列を返す

はじめに

一次元配列を指定の要素数ごとに分割し、二次元配列にする必要があったため、そのロジックに関する小ネタです。本記事はQiitaで公開した記事の要約版と補足になります。

技術的な話

const chunkedArr = ((arr, size) => arr.reduce((previous, _, i) => i % size ? previous : [...previous, arr.slice(i, i + size)], []))(originalArr, num);

//originalArr = [1,2, ... ,n]、num = n

ポイントはArray.reduece()の使い方になります。特に第一引数を返す際、スプレッド構文を利用することでワンライナーにすることができます。もちろん、スプレッド構文を使わなくてもワンライナーで記述することは可能です。

要するに、Array.reduece()の第一引数と第二引数の振る舞いが理解できれば、様々なバリエーションで表題のような結果を得るロジックを記述できるということです。

[追記] 2021.11.30

頂いたコメントより、処理負荷の面からも結果が配列ならArray.flatMap()を使用するほうがより適切であると判断し、以下、サンプルを記載しておきます。（結果がオブジェクトなら、Array.reduce()で良いでしょう）

const chunkedArr = ((arr, num) => arr.flatMap((_, i, arr)=>i%num? []: [arr.slice(i, i+num)]))(originalArr, num);

CSSを含めたフロントエンドの表示・動作不具合の解析も行います

以下サービスよりご相談受付けております。