상현에 하루하루
개발자의 하루

Array 를 n 개씩 묶기

( 업데이트: )

포스트 데이터나 API로 받는 데이터를 가져올때 Array로 묶여서 가져왔는데 그 중 3개씩 묶음을 반복하고 싶은 상황이 생겼다.

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<ul>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>
...Code language: HTML, XML (xml)

위와 같이 ul을 여러번 반복해서 하려하고 array를 묶을때 따로 데이터를 추가적으로 부여하고싶어서 2차원 배열로 만드는 함수를 만들어야했다.

원하는 것

1차원 배열을 원하는 길이만큼 2차원 배열로 변환시켜주는 함수

PHP

$before = [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12];

function division ($originArray ,$n) {
  $result = [];
  $cnt = floor(count($<meta charset="utf-8">originArray) / $n) + (floor(count($<meta charset="utf-8">originArray) % $n) > 0 ? 1 : 0);
  for ($i = 0; $i < $cnt; $i++) {
    $push = array_slice($<meta charset="utf-8">originArray, $n * $i, 3);
    array_push($result, $push);
  }
  return $result;
}Code language: PHP (php)
$after = division($before, 3);
var_dump($after);
/**
  array(4) {
    [0] => [1, 2, 3],
    [1] => [4, 5, 6],
    [2] => [7, 8, 9],
    [3] => [10, 11, 12],
  }
*/Code language: PHP (php)

$cnt로 몇개씩 묶는 것을 몇번 반복하는지 미리 지정 12개의 값이 있다면 3개로 묶는다면 4번 반복

JS

Array.prototype.division = function (n) {
  var arr = this;
  var len = arr.length;
  var cnt = Math.floor(len / n) + (Math.floor(len % n) > 0 ? 1 : 0);
  var tmp = [];
 
  for (var i = 0; i < cnt; i++) {
    tmp.push(arr.splice(0, n));
  }
 
  return tmp;
}Code language: JavaScript (javascript)
var a = [0, 1, 2, 3, 4, 5, 6];
var b = a.division(3);
/*
  b[0] : [0, 1, 2]
  b[1] : [3, 4, 5]
  b[2] : [6]
*/Code language: JavaScript (javascript)