JavaScriptで指定した数値ごとに、配列を区分け・分割する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで指定した数値ごとに、配列を区分け・分割する方法について解説していきます。

1 JavaScriptで指定した数値ごとに、配列を区分け・分割する方法
- 1.1 配列を区分け・分割する処理のSample
- 1.2 配列を区分け・分割する関数Sample
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで指定した数値ごとに、配列を区分け・分割する方法

まずはJavaScriptで指定した数値ごとに、配列を区分け・分割する処理のSampleCodeを紹介します。

配列を区分け・分割する処理のSample

const cardList = [
  {id: 1, participant: 'ロボたま', affiliation: 'ロボ玉開発部'},
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 3, participant: '白桃', affiliation: 'エンジニア'},
  {id: 4, participant: 'ももちゃん', affiliation: '人事部'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'ロボ玉開発部'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: 'エンジニア'},
  {id: 11, participant: 'ロボ玉試作1号機', affiliation: '営業部'},
];

let groupingNum = 3;
let len = cardList.length;
let curentNum = 0;
const separateList = [];
let tmpList = [];

cardList.forEach((card, index) => {
  // index:0 は数値として挙動を乱す
  curentNum = index +1;
  tmpList.push(card);

  // groupingNum ごとに separateListにPushする
  if (curentNum % groupingNum === 0) {
    separateList.push(tmpList); 
    tmpList = []; //初期化処理
  }
  // 最後にあまりの部分を処理する
  if (len === curentNum) {
    if (!tmpList.length) return; 
    else separateList.push(tmpList);
  }
});
console.log('separateList', separateList);

配列を区分け・分割する関数Sample

先述の処理を踏まえた次の関数は、指定した数値ごとに配列を区分け・分割するものになります。


const cardList = [
  {id: 1, participant: 'ロボたま', affiliation: 'ロボ玉開発部'},
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 3, participant: '白桃', affiliation: 'エンジニア'},
  {id: 4, participant: 'ももちゃん', affiliation: '人事部'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'ロボ玉開発部'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: 'エンジニア'},
  {id: 11, participant: 'ロボ玉試作1号機', affiliation: '営業部'},
];


function ArrayGrouping (list, groupingNum) {
  let len = list.length;
  let curentNum = 0;
  const separateList = [];
  let tmpList = [];

  list.forEach((item, index) => {
    curentNum = index +1;
    tmpList.push(item);
    if (curentNum % groupingNum === 0) {
      separateList.push(tmpList); 
      tmpList = [];
    }
    if (len === curentNum) {
      if (!tmpList.length) return; 
      else separateList.push(tmpList);
    }
  });
  return separateList;
}

console.log(ArrayGrouping(cardList, 2));