こんにちは、フロントエンドエンジニアのまさにょんです。
今回は、JavaScriptで配列内の値をグループ分け、カテゴライズする実装方法ついて解説して行きます。
今回取り上げる手法は、Separatorを利用したグループ分け・カテゴライズです。
目次
配列内の値のグループ分け・カテゴライズ 実装方法 Ver. Separator
// < 配列内の値のグループ分け・カテゴライズ 実装方法 Ver. Separator >
// 1. Separator を利用した、配列の Group化 を紹介します。
// 2. Separator-List => Group を切り分ける Separator の List
const separatorList = ['@Separator robotama-1', '@Separator robotama-2', '@Separator robotama-3'];
// 3. Group-List => Group の先頭に Separatorがいる!
const robotamaDev = [
'@Separator robotama-1', 'ロボ玉試作1号機', '白桃',
'@Separator robotama-2', 'ロボ玉試作2号機', 'ももちゃん',
'@Separator robotama-3', 'ロボ玉試作3号機', 'ロボ玉'
];
// 4. 選ばれた Group => Separator
let selectSeparator = '@Separator robotama-1';
// 5. 選ばれた Group を示す Separator の index番号を探す!
const selectSeparatorIndex = robotamaDev.findIndex(robotama => robotama === selectSeparator);
const index = separatorList.indexOf(selectSeparator);
const nextTargetSeparator = separatorList[index+1];
// 6. 選ばれた Group を示す Separator の次にある Separator の index番号を探す!
const nextSeparatorIndex = robotamaDev.findIndex(robotama => robotama === nextTargetSeparator);
const copyList = [...robotamaDev];
// 7. Separator の index番号で、間にいる GroupたちのDataをSliceする!
const selectGroupingList = copyList.slice(selectSeparatorIndex, nextSeparatorIndex);
// 8. @Separator-Remove
selectGroupingList.shift();
console.log({selectGroupingList});
// selectGroupingList: (2) ['ロボ玉試作1号機', '白桃']