JavaScriptで先頭の番号が同じ文字列をグループ化する方法

はじめに

文字列形式で表された数値の配列を扱う場面は少なくありません。例えば、次のような配列を考えてみましょう。

const arr = ["1.1","1.2","1.3","2.1","2.2","3.1","3.2","3.3","4.1","4.2"];

ここで求められているのは、JavaScriptの関数を作成し、先頭の番号(ドットの前の部分)が同じ文字列どうしを、同じサブ配列にグループ化することです。

つまり、この関数の出力は次のようになります。

const output = [["1.1","1.2","1.3"],["2.1","2.2"],["3.1","3.2","3.3"],["4.1","4.2"]];

実装例

この処理を実現するコードは以下の通りです。

const arr = ["1.1","1.2","1.3","2.1","2.2","3.1","3.2","3.3","4.1","4.2"];
const groupSimilarStarters = arr => {
   let res = [];
   res = arr.reduce((acc, val, ind) => {
      const firstChar = el => {
         return (el || '').split('.')[0];
      }
      if(firstChar(val) === firstChar(arr[ind - 1])){
         acc[acc.length - 1].push(val);
      }else{
         acc.push([val]);
      };
      return acc;
   }, []);
   return res;
}
console.log(groupSimilarStarters(arr));

コードの解説

このコードでは、reduceメソッドを使って配列を先頭から順に走査しています。各要素はドット(.)で分割され、その先頭部分の番号が取り出されます。前の要素と番号が一致する場合は、現在の最後のグループに要素を追加し、一致しない場合は新しいグループを作成します。これにより、元の配列の並び順を保ったままグループ化が行われます。

出力結果

コンソールには次のように出力されます。

[
   [ '1.1', '1.2', '1.3' ],
   [ '2.1', '2.2' ],
   [ '3.1', '3.2', '3.3' ],
   [ '4.1', '4.2' ]
]

まとめ

reduceとsplitを組み合わせることで、先頭の番号が同じ文字列をシンプルにグループ化できます。この手法は、バージョン番号や章立ての番号など、階層的な番号を持つデータを整理したい場合に特に役立ちます。