Split array into chunks

Question

Let s say that I have an Javascript array looking as following       Element 1   Element 2   Element 3           with close to a hundred elements    What approach would be appropriate to chunk  split  the array into many smaller arrays with  lets say  10 elements at its most

User · Answer

This is what i use  it might not be super fast  but it is compact and simple    x000D   x000D  let chunksplit    stream  size    gt  stream reduce  chunks  item  idx  arr    gt   idx   size    0        chunks  arr slice idx  idx   size     chunks       x000D    if the index is a multiple of the chunksize  add new array x000D   x000D  let testArray    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22   x000D   x000D  document write JSON stringify  chunksplit testArray  5      x000D    using JSON stringify for the nested arrays to be shown x000D   x000D   x000D

User · Answer

ES6 one-line approach based on Array prototype reduce and push methods   const doChunk    list  size    gt  list reduce  r  v    gt      r length    r r length - 1  length     size       r push  v     r r length - 1  push v    amp  amp  r         console log doChunk  0 1 2 3 4 5 6 7 8 9 10 11 12   5         0  1  2  3  4    5  6  7  8  9    10  11  12

User · Answer

I changed BlazeMonger s slightly to use for a jQuery object    var  list      li         listRows         for  var i   0  len    list length  chunk   4  n   0  i  lt  len  i    chunk  n          listRows n     list slice i  i   chunk

User · Answer

For a functional solution  using Ramda   Where popularProducts is your input array  5 is the chunk size   x000D   x000D  import splitEvery from  ramda src splitEvery  x000D   x000D  splitEvery 5  popularProducts  map  chunk  i    gt    x000D     do something with chunk x000D   x000D     x000D   x000D   x000D

User · Answer

Here is neat  amp  optimised implemention of chunk   function  Assuming default chunk size is 10     var chunk   function list  chunkSize      if   list length        return           if  typeof chunkSize     undefined        chunkSize   10         var i  j  t  chunks         for  i   0  j   list length  i  lt  j  i    chunkSize        t   list slice i  i   chunkSize       chunks push t          return chunks        calling function var list    1  2  3  4  5  6  7  8  9  10  11  12   var chunks   chunk list

User · Answer

Here s a recursive solution that is tail call optimize    x000D   x000D  const splitEvery    n  xs  y       gt  x000D    xs length   0   y   splitEvery n  xs slice n   y concat  xs slice 0  n      x000D   x000D  console log splitEvery 2   0  1  2  3  4  5  6  7  8  9    x000D   x000D   x000D

User · Answer

I solved it like this  const chunks       const chunkSize   10  for  let i   0  i  lt  arrayToSplit length  i    chunkSize      const tempArray   arrayToSplit slice i  i   chunkSize     chunks push tempArray

User · Answer

Well  a nice function for this would be   function chunk arr times       if times   null  var times   10    Fallback for users wanting to use the default of ten    var tempArray   Array     Array to be populated with chunks     for i 0 i lt arr length times i          tempArray i    Array     Sub-Arrays          Repeats for each chunk             for j 0 j lt times j             if   arr i times j    undefined   tempArray i  j    arr i times j   Populate Sub-  Arrays with chunks            else         j   times   Stop loop        i   arr length times   Stop loop                     return tempArray   Return the populated and chunked array        Usage would be   chunk array sizeOfChunks    I commented it so you could understand what was going on     The formatting is a bit off  I programmed this on mobile

User · Answer

Here s a ES6 version using reduce   x000D   x000D  var perChunk   2    items per chunk     x000D   x000D  var inputArray     a   b   c   d   e   x000D   x000D  var result   inputArray reduce  resultArray  item  index    gt     x000D    const chunkIndex   Math floor index perChunk  x000D   x000D    if  resultArray chunkIndex     x000D      resultArray chunkIndex          start a new chunk x000D      x000D   x000D    resultArray chunkIndex  push item  x000D   x000D    return resultArray x000D         x000D   x000D  console log result      result     a   b      c   d      e    x000D   x000D   x000D    And you re ready to chain further map reduce transformations  Your input array is left intact    If you prefer a shorter but less readable version  you can sprinkle some concat into the mix for the same end result   inputArray reduce  all one i    gt       const ch   Math floor i perChunk       all ch       concat  all ch       one       return all

User · Answer

There could be many solution to this problem   one of my fav is    x000D   x000D  function chunk array  size    x000D      const chunked       x000D   x000D      for  element of array   x000D          let last   chunked chunked length - 1   x000D   x000D          if last  amp  amp  last length    size   x000D              last push element  x000D           else  x000D              chunked push  element   x000D            x000D        x000D      x000D      return chunked  x000D    x000D   x000D   x000D  function chunk1 array  size    x000D      const chunked       x000D   x000D      let index   0  x000D   x000D      while index  lt  array length   x000D          chunked push array slice index index  size   x000D          index    size  x000D        x000D      return chunked  x000D    x000D   x000D  console log  chunk without slice   chunk  1 2 3 4 5 5  2    x000D  console log  chunk with use of slice funtion  chunk1  1 2 3 4 5 6  2   x000D   x000D   x000D

User · Answer

Here s another solution with the reduce   method  though slightly different from other examples  Hopefully my explanation is a bit clearer as well   x000D   x000D  var arr    0  1  2  3  4  5  6  7   var chunkSize   3   arr   arr reduce  acc  item  idx    gt      let group   acc pop      if  group length    chunkSize        acc push group       group             group push item     acc push group     return acc             console log arr     Prints   0  1  2    3  4  5    6  7   x000D   x000D   x000D    Explanation We call a reducer which  for each item in the array  gets the last item of the accumulator with pop    Remember that this item is an array which groups up to chunkSize number of items  3 in this example   If  and only if  this group has the array length equal to chunksize we need to re-insert the group back into the accumulator and create a new group  We then push the current item into our group array  which may already contain 0  1 or 2 items from the previous steps   With the current item inserted into the group  we need to re-insert the group back into the larger collection  The process will repeat until we ve iterated through all items in arr  Note that we have also provided the reducer with the starting value of an empty array inside an array with

User · Answer

One more solution using Array prototype reduce     x000D   x000D  const chunk    array  size    gt    array reduce  acc     i    gt        if  i   size     0  acc push array slice i  i   size       return acc              Usage  const numbers    1  2  3  4  5  6  7  8  9  10  const chunked   chunk numbers  3  console log chunked  x000D   x000D   x000D   This solution is very similar to the solution by Steve Holgado  However  because this solution doesn t utilize array spreading and doesn t create new arrays in the reducer function  it s faster  see jsPerf test  and subjectively more readable  simpler syntax  than the other solution  At every nth iteration  where n   size  starting at the first iteration   the accumulator array  acc  is appended with a chunk of the array  array slice i  i   size   and then returned  At other iterations  the accumulator array is returned as-is  If size is zero  the method returns an empty array  If size is negative  the method returns broken results  So  if needed in your case  you may want to do something about negative or non-positive size values   If speed is important in your case  a simple for loop would be faster than using reduce    see the jsPerf test   and some may find this style more readable as well  function chunk array  size         This prevents infinite loops   if  size  lt  1  throw new Error  Size must be positive      const result        for  let i   0  i  lt  array length  i    size        result push array slice i  i   size         return result

User · Answer

Try to avoid mucking with native prototypes  including Array prototype  if you don t know who will be consuming your code  3rd parties  coworkers  yourself at a later date  etc    There are ways to safely extend prototypes  but not in all browsers  and there are ways to safely consume objects created from extended prototypes  but a better rule of thumb is to follow the Principle of Least Surprise and avoid these practices altogether  If you have some time  watch Andrew Dupont s JSConf 2011 talk   quot Everything is Permitted  Extending Built-ins quot   for a good discussion about this topic  But back to the question  while the solutions above will work  they are overly complex and requiring unnecessary computational overhead  Here is my solution  function chunk  arr  len       var chunks             i   0        n   arr length     while  i  lt  n        chunks push arr slice i  i    len           return chunks        Optionally  you can do the following to avoid cluttering the global namespace  Array chunk   chunk

User · Answer

I tested the different answers into jsperf com  The result is available there  https   web archive org web 20150909134228 https   jsperf com chunk-mtds And the fastest function  and that works from IE8  is this one  function chunk arr  chunkSize      if  chunkSize  lt   0  throw  quot Invalid chunk size quot     var R         for  var i 0 len arr length  i lt len  i  chunkSize      R push arr slice i i chunkSize      return R

User · Answer

function chunk arr  size      var tempAr         var j   0    for var i  0  i lt arr length i          if j  size    j  0          tempAr push arr slice i  i size           j 0         j          return tempAr

User · Answer

In case this is useful to anyone  this can be done very simply in RxJS 6  const arr    1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16   from arr  pipe bufferCount 3   subscribe chunk   gt  console log chunk     Outputs   1  2  3   4  5  6   7  8  9   10  11  12   13  14  15   16

User · Answer

Ok  let s start with a fairly tight one   function chunk arr  n        return arr slice 0  arr length n-1  n 0              map function c i    return arr slice n i n i n           Which is used like this   chunk  1 2 3 4 5 6 7   2     Then we have this tight reducer function   function chunker p  c  i         p i this 0    p i this 0         push c       return p      Which is used like this    1 2 3 4 5 6 7  reduce chunker bind 3         Since a kitten dies when we bind this to a number  we can do manual currying like this instead      Fluent alternative API without prototype hacks  function chunker n       return function p  c  i            p i n 0    p i n 0         push c          return p            Which is used like this    1 2 3 4 5 6 7  reduce chunker 3         Then the still pretty tight function which does it all in one go   function chunk arr  n        return arr reduce function p  cur  i             p i n 0    p i n 0         push cur           return p                chunk  1 2 3 4 5 6 7   3

User · Answer

There have been many answers but this is what I use   const chunk    arr  size    gt    arr      reduce  acc     i    gt         i   size            acc               acc  arr slice i  i   size                 USAGE const numbers    1  2  3  4  5  6  7  8  9  10  chunk numbers  3        1  2  3    4  5  6    7  8  9    10     First  check for a remainder when dividing the index by the chunk size   If there is a remainder then just return the accumulator array   If there is no remainder then the index is divisible by the chunk size  so take a slice from the original array  starting at the current index  and add it to the accumulator array   So  the returned accumulator array for each iteration of reduce looks something like this      0    1  2  3      1    1  2  3      2    1  2  3      3    1  2  3    4  5  6      4    1  2  3    4  5  6      5    1  2  3    4  5  6      6    1  2  3    4  5  6    7  8  9      7    1  2  3    4  5  6    7  8  9      8    1  2  3    4  5  6    7  8  9      9    1  2  3    4  5  6    7  8  9    10

User · Answer

I aimed at creating a simple non-mutating solution in pure ES6  Peculiarities in javascript make it necessary to fill the empty array before mapping  -   function chunk a  l         return new Array Math ceil a length   l   fill 0           map     n    gt  a slice n l  n l   l         This version with recursion seem simpler and more compelling   function chunk a  l         if  a length    0  return          else return  a slice 0  l   concat chunk a slice l   l         The ridiculously weak array functions of ES6 makes for good puzzles  -

User · Answer

Try this         x000D   x000D  var oldArray      Banana    Orange    Lemon    Apple    Mango    Banana    Orange    Lemon    Apple    Mango    Banana    Orange    Lemon    Apple    Mango    Banana    Orange    Lemon    Apple    Mango    Banana    Orange    Lemon    Apple    Mango    x000D   x000D  var newArray       x000D   x000D  while oldArray length   x000D      let start   0  x000D      let end   10  x000D      newArray push oldArray slice start  end    x000D      oldArray splice start  end   x000D     x000D    x000D   console log newArray   x000D   x000D   x000D

User · Answer

Her is a simple solution using  Blazemonger solution  function array chunk arr  size          initialize vars     var i      j   arr length      tempArray              loop through and jump based on size     for  i 0  i lt j  i  size               slice chunk of arr and push to tempArray         tempArray push arr slice i i size                 return temp array  chunck      return tempArray     This got the pipline flowing for me  hope this helps someone else out there

User · Answer

Using generators  x000D   x000D  function  chunks arr  n      for  let i   0  i  lt  arr length  i    n        yield arr slice i  i   n          let someArray    0 1 2 3 4 5 6 7 8 9  console log     chunks someArray  2         0 1   2 3   4 5   6 7   8 9   x000D   x000D   x000D

User · Answer

Here is a non-mutating solution using only recursion and slice     const splitToChunks    arr  chunkSize  acc         gt        arr length  gt  chunkSize           splitToChunks              arr slice chunkSize               chunkSize                  acc  arr slice 0  chunkSize                           acc  arr       Then simply use it like splitToChunks  1  2  3  4  5   3  to get   1  2  3    4  5     Here is a fiddle for you to try out  https   jsfiddle net 6wtrbx6k 2

User · Answer

I created the following JSFiddle to demonstrate my approach to your question    x000D   x000D   function     x000D       Sample arrays x000D    var   elements     0    1    2    3    4    5    6    7    x000D        elements     0    1    2    3    4    5    6    7    8    9    10    11    12    13    14    15    16    17    18    19    20    21    22    23    24    25    26    27    28    29    30    31    32    33    34    35    36    37    38    39    40    41    42    43    x000D   x000D    var splitElements       x000D        delimiter   10     Change this value as needed x000D         x000D       parameters  array  number of elements to split the array by x000D    if elements length  gt  delimiter   x000D     splitElements   splitArray elements  delimiter   x000D      x000D    else   x000D        No need to do anything if the array s length is less than the delimiter x000D     splitElements   elements  x000D      x000D     x000D      Displaying result in console x000D    for element in splitElements   x000D     if splitElements hasOwnProperty element    x000D       console log element           splitElements element    x000D        x000D      x000D        x000D   x000D  function splitArray elements  delimiter    x000D    var elements length   elements length  x000D   x000D    if  elements length  gt  delimiter    x000D      var myArrays          parent array  used to store each sub array x000D        first   0     used to capture the first element in each sub array x000D        index   0     used to set the index of each sub array x000D   x000D      for  var i   0  i  lt  elements length    i    x000D        if  i   delimiter     0    x000D            Capture the first element of each sub array from the original array  when i is a modulus factor of the delimiter  x000D          first   i  x000D          else if  delimiter -  i   delimiter      1    x000D           Build each sub array  from the original array  sliced every time the i one minus the modulus factor of the delimiter  x000D          index    i   1    delimiter - 1  x000D          myArrays index    elements slice first  i   1   x000D          x000D        else if i   1     elements length   x000D            Build the last sub array which contain delimiter number or less elements x000D         myArrays index   1    elements slice first  i   1   x000D          x000D        x000D         Returned is an array of arrays x000D      return myArrays  x000D      x000D    x000D   x000D   x000D    First of all  I have two examples  an array with less than eight elements  another with an array with more than eight elements  comment whichever one you do not want to use    I then check for the size of the array  simple but essential to avoid extra computation  From here if the array meets the criteria  array size   delimiter  we move into the splitArray function   The splitArray function takes in the delimiter  meaning 8  since that is what you want to split by   and the array itself  Since we are re-using the array length a lot  I am caching it in a variable  as well as the first and last   first represents the position of the first element in an array  This array is an array made of 8 elements  So in order to determine the first element we use the modulus operator   myArrays is the array of arrays  In it we will store at each index  any sub array of size 8 or below  This is the key strategy in the algorithm below   index represents the index for the myArrays variable  Every time a sub array of 8 elements or less is to be stored  it needs to be stored in the corresponding index  So if we have 27 elements  that means 4 arrays  The first  second and third array will have 8 elements each  The last will have 3 elements only  So index will be 0  1  2  and 3 respectively   The tricky part is simply figuring out the math and optimizing it as best as possible  For example else if  delimiter -  i   delimiter      1  this is to find the last element that should go in the array  when an array will be full  example  contain 10 elements    This code works for every single scenario  you can even change the delimiter to match any array size you d like to get  Pretty sweet right  -   Any questions  Feel free to ask in the comments below

User · Answer

in coffeescript   assume  ar  is the original array   newAr is the new array of arrays  newAr      chunk   10 for i in  0    ar length  by chunk    newAr push ar i    i chunk     or  print out the elements one line per chunk for i in  0    ar length  by chunk    console log ar i    i chunk  join

User · Answer

x000D   x000D      const array    86 133 87 133 88 133 89 133 90 133   x000D      const new array       x000D   x000D   const chunksize   2  x000D      while  array length    x000D       const chunk   array splice 0 chunksize   x000D       new array push chunk   x000D        x000D   x000D      console log new array  x000D   x000D   x000D

User · Answer

EDIT   mblase75 added more concise code to the earlier answer while I was writing mine  so I recommend going with his solution   You could use code like this   var longArray     Element 1   Element 2   Element 3             var smallerArrays          will contain the sub-arrays of 10 elements each var arraySize   10  for  var i 0 i lt Math ceil longArray length arraySize  i          smallerArrays push longArray slice i arraySize i arraySize arraySize        Change the value of arraySize to change the maximum length of the smaller arrays

User · Answer

I d prefer to use splice method   var chunks   function array  size      var results         while  array length        results push array splice 0  size          return results

User · Answer

Created a npm package for this https   www npmjs com package array chunk  var result        for  var i   0  i  lt  arr length  i    size      result push arr slice i  size   i      return result    When using a TypedArray  var result        for  var i   0  i  lt  arr length  i    size      result push arr subarray i  size   i      return result

User · Answer

If you are using Underscore JS  just use    var result     chunk arr elements per chunk    Most projects already use underscore as a dependency  anyways

User · Answer

Here s my approach using Coffeescript list comprehension  A great article detailing comprehensions in Coffeescript can be found here   chunk   arr  size  - gt      chunks    arr slice index  index size  for item  index in arr by size      return chunks

User · Answer

I prefer to use the splice method instead of slice  This solution uses the array length and chunk size to create a loop count and then loops over the array which gets smaller after every operation due to splicing in each step       function chunk array  size          let resultArray             let chunkSize   array length size        for i 0  i lt chunkSize  i              resultArray push array splice 0  size                return console log resultArray             chunk  1 2 3 4 5 6 7 8   2     If you dont want to mutate the original array  you can clone the original array using the spread operator and then use that array to solve the problem       let clonedArray       OriginalArray

User · Answer

I recommend using lodash  Chunking is one of many useful functions there  Instructions  npm i --save lodash  Include in your project  import   as   from  lodash    Usage  const arrayOfElements     quot Element 1 quot   quot Element 2 quot   quot Element 3 quot    quot Element 4 quot    quot Element 5 quot   quot Element 6 quot   quot Element 7 quot   quot Element 8 quot   quot Element 9 quot   quot Element 10 quot   quot Element 11 quot   quot Element 12 quot   const chunkedElements     chunk arrayOfElements  10   You can find my sample here  https   playcode io 659171

User · Answer

Neat and clean easy to understand   let nums    1  2  3  4  5  6  7  8  9    let len   nums length        const chunkArr    arr  chunkNo    gt          let newArr             for let i   0  i  lt  len  i             if nums 0          amp  amp  nums 0      undefined              let a   nums splice 0 chunkNo               newArr push a                            return newArr             console log chunkArr nums  5

User · Answer

This is the most efficient and straight-forward solution I could think of   function chunk array  chunkSize        let chunkCount   Math ceil array length   chunkSize       let chunks   new Array chunkCount       for let i   0  j   0  k   chunkSize  i  lt  chunkCount    i            chunks i    array slice j  k           j   k          k    chunkSize            return chunks

User · Answer

The following ES2015 approach works without having to define a function and directly on anonymous arrays  example with chunk size 2     11 22 33 44 55  map     i  all    gt  all slice 2 i  2 i 2   filter x  gt x length    If you want to define a function for this  you could do it as follows  improving on K   s comment on Blazemonger s answer    const array chunks    array  chunk size    gt  array      map     i  all    gt  all slice i chunk size   i 1  chunk size        filter x   gt  x length

User · Answer

ES6 Generator version  function  chunkArray array size 1       var clone   array slice 0       while  clone length gt 0         yield clone splice 0 size       var a   new Array 100  fill   map  x index   gt index   for const c of chunkArray a 10        console log c

User · Answer

Here s a solution using ImmutableJS  where items is an Immutable List and size is the required grouping size   const partition     items  size    gt      return items groupBy  items  i    gt  Math floor i size

User · Answer

ES6 spreads functional  ohmy  ftw   x000D   x000D  const chunk   x000D     size  xs    gt   x000D      xs reduce  x000D         segments     index    gt  x000D          index   size     0  x000D                  segments  xs slice index  index   size    x000D              segments   x000D           x000D         x000D   x000D  console log  chunk 3   1  2  3  4  5  6  7  8      x000D   x000D   x000D

User · Answer

Array prototype sliceIntoChunks   function chunkSize                        var chunks                           var temparray   null                       for  var i   0  i  lt  this length  i                              if  i   chunkSize     0                                temparray   new Array                                chunks push temparray                                                     temparray push this i                                               return chunks                       You can use as follows   var myArray     A    B    C    D    E    var mySlicedArray   myArray sliceIntoChunks 2     Result   mySlicedArray 0      A    B    mySlicedArray 1      C    D    mySlicedArray 2      E

User · Answer

This should be straightforward answer without many mathematical complications   function chunkArray array  sizeOfTheChunkedArray      const chunked          for  let element of array        const last   chunked chunked length - 1        if  last    last length     sizeOfTheChunkedArray          chunked push  element         else         last push element               return chunked

User · Answer

results      chunk size   10 while array length  gt  0      results push array splice 0  chunk size

User · Answer

Modified from an answer by dbaseman  https   stackoverflow com a 10456344 711085   x000D   x000D  Object defineProperty Array prototype   chunk inefficient     x000D    value  function chunkSize    x000D      var array   this  x000D      return    concat apply     x000D        array map function elem  i    x000D          return i   chunkSize         array slice i  i   chunkSize    x000D           x000D         x000D      x000D      x000D   x000D  console log  x000D     1  2  3  4  5  6  7  chunk inefficient 3  x000D    x000D       1  2  3    4  5  6    7   x000D   x000D   x000D      minor addendum   I should point out that the above is a not-that-elegant  in my mind  workaround to use Array map  It basically does the following  where   is concatenation     1 2 3                4 5 6                7     It has the same asymptotic running time as the method below  but perhaps a worse constant factor due to building empty lists  One could rewrite this as follows  mostly the same as Blazemonger s method  which is why I did not originally submit this answer    More efficient method    x000D   x000D     refresh page if experimenting and you already defined Array prototype chunk x000D   x000D  Object defineProperty Array prototype   chunk     x000D    value  function chunkSize    x000D      var R       x000D      for  var i   0  i  lt  this length  i    chunkSize  x000D        R push this slice i  i   chunkSize    x000D      return R  x000D      x000D      x000D   x000D  console log  x000D     1  2  3  4  5  6  7  chunk 3  x000D    x000D   x000D   x000D      My preferred way nowadays is the above  or one of the following   Array range   function n         Array range 5  -- gt   0 1 2 3 4    return Array apply null Array n   map  x i    gt  i      Object defineProperty Array prototype   chunk       value  function n            ACTUAL CODE FOR CHUNKING ARRAY      return Array range Math ceil this length n   map  x i    gt  this slice i n i n n               Demo    gt  JSON stringify  Array range 10  chunk 3       1 2 3   4 5 6   7 8 9   10     Or if you don t want an Array range function  it s actually just a one-liner  excluding the fluff    var ceil   Math ceil   Object defineProperty Array prototype   chunk    value  function n        return Array ceil this length n   fill   map    i    gt  this slice i n i n n           or  Object defineProperty Array prototype   chunk    value  function n        return Array from Array ceil this length n       i   gt this slice i n i n n

User · Answer

Use chunk from lodash  lodash chunk arr  lt size gt   forEach chunk  gt     console log chunk

User · Answer

Hi try this -   function split arr  howMany            var newArr       start   0  end   howMany          for var i 1  i lt   Math ceil arr length   howMany   i                  newArr push arr slice start  end                start   start   howMany              end   end   howMany                   console log newArr            split  1 2 3 4 55 6 7 8 8 9  3

User · Answer

in coffeescript   b    a splice 0  len  while a length   demo  a    1  2  3  4  5  6  7   b    a splice 0  2  while a length      1  2        3  4        5  6        7

User · Answer

Here s a version with tail recursion and array destructuring    Far from the fastest performance  but I m just amused that js can do this now  Even if it isn t optimized for it     const getChunks    arr  chunk size  acc         gt        if  arr length     0    return acc       const  hd  tl      arr slice 0  chunk size   arr slice chunk size        return getChunks tl  chunk size  acc concat  hd          USAGE const my arr    1 2 3 4 5 6 7 8 9  const chunks   getChunks my arr  2  console log chunks       1 2   3 4    5 6    7 8    9

User · Answer

ONE-LINER const chunk    a n   gt     Array Math ceil a length n    map    i   gt a slice n i n n i     For TypeScript const chunk    lt T gt  arr  T    size  number   T       gt        Array Math ceil arr length   size    map     i    gt      arr slice size   i  size   size   i        DEMO  x000D   x000D  const chunk    a n   gt     Array Math ceil a length n    map    i   gt a slice n i n n i    document write JSON stringify chunk  1  2  3  4   2     x000D   x000D   x000D   Chunk By Number Of Groups const part  a n   gt     Array n   map    i   gt a slice i Math ceil a length n   i 1  Math ceil a length n      For TypeScript const part    lt T gt  a  T    n  number   T       gt      const b   Math ceil a length   n     return     Array n   map     i    gt  a slice i   b   i   1    b        DEMO  x000D   x000D  const part    a  n    gt        const b   Math ceil a length   n       return     Array n   map     i    gt  a slice i   b   i   1    b        document write JSON stringify part  1  2  3  4  5  6   2     lt br  gt     document write JSON stringify part  1  2  3  4  5  6  7   2     x000D   x000D   x000D

User · Answer

Old question  New answer  I actually was working with an answer from this question and had a friend improve on it  So here it is    Array prototype chunk   function   n         if    this length             return               return   this slice  0  n     concat  this slice n  chunk n          1 2 3 4 5 6 7 8 9 0  chunk 3    gt    1 2 3   4 5 6   7 8 9   0

User · Answer

You can take this ES6 chunk function  which is easy to use   x000D   x000D  const chunk    array  size    gt    Array from  length  Math ceil array length   size     value  index    gt  array slice index   size  index   size   size     const itemsPerChunk   3  const inputArray     a    b    c    d    e    f    g     const newArray   chunk inputArray  itemsPerChunk   console log newArray length      3   document write JSON stringify newArray             a    b    c        d    e    f        g      x000D   x000D   x000D

User · Answer

Using Array prototype splice   and splice it until the array has element   x000D   x000D  Array prototype chunk   function size        let result                while this length            result push this splice 0  size                       return result     const arr    1  2  3  4  5  6  7  8  9   console log arr chunk 2    x000D   x000D   x000D   Update Array prototype splice   populates the original array and after performing the chunk   the original array  arr  becomes     So if you want to keep the original array untouched  then copy and keep the arr data into another array and do the same thing   x000D   x000D  Array prototype chunk   function size      let data       this       let result                while data length            result push data splice 0  size               return result     const arr    1  2  3  4  5  6  7  8  9   console log  chunked    arr chunk 2    console log  original   arr   x000D   x000D   x000D   P S  Thanks to  mts-knn for mentioning the matter

User · Answer

One-liner in ECMA 6 const  list chuckSize      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15   6       Array Math ceil list length   chuckSize    map     gt  list splice 0 chuckSize

User · Answer

The array slice method can extract a slice from the beginning  middle  or end of an array for whatever purposes you require  without changing the original array  var i j temparray chunk   10  for  i 0 j array length  i lt j  i  chunk        temparray   array slice i i chunk          do whatever

User · Answer

my trick is to use parseInt i chunkSize  and parseInt i chunkSize  and then filling the array   x000D   x000D     filling items x000D  let array       x000D  for let i   0  i lt  543  i    x000D    array push i   x000D    x000D      printing the splitted array x000D   console log getSplittedArray array  50    x000D    x000D      get the splitted array x000D   function getSplittedArray array  chunkSize   x000D    let chunkedArray       x000D    for let i   0  i lt array length  i     x000D      try  x000D        chunkedArray parseInt i chunkSize   parseInt i chunkSize     array i   x000D       catch e   x000D        chunkedArray parseInt i chunkSize         x000D        chunkedArray parseInt i chunkSize   parseInt i chunkSize     array i   x000D        x000D      x000D    return chunkedArray  x000D     x000D   x000D   x000D

User · Answer

If you use EcmaScript version    5 1  you can implement a functional version of chunk   using array reduce   that has O N  complexity    x000D   x000D  function chunk chunkSize  array    x000D      return array reduce function previous  current    x000D          var chunk  x000D          if  previous length     0     x000D                  previous previous length -1  length     chunkSize    x000D              chunk            1 x000D              previous push chunk        2 x000D            x000D          else   x000D              chunk   previous previous length -1        3 x000D            x000D          chunk push current        4 x000D          return previous       5 x000D                   6 x000D    x000D   x000D  console log chunk 2    a    b    c    d    e      x000D     prints      a    b        c    d        e      x000D   x000D   x000D    Explanation of each    nbr above    Create a new chunk if the previous value  i e  the previously returned array of chunks  is empty or if the last previous chunk has chunkSize items Add the new chunk to the array of existing chunks Otherwise  the current chunk is the last chunk in the array of chunks Add the current value to the chunk Return the modified array of chunks Initialize the reduction by passing an empty array     Currying based on chunkSize   var chunk3   function array        return chunk 3  array       console log chunk3   a    b    c    d    e         prints      a    b    c        d    e          You can add the chunk   function to the global Array object    x000D   x000D  Object defineProperty Array prototype   chunk     x000D      value  function chunkSize    x000D          return this reduce function previous  current    x000D              var chunk  x000D              if  previous length     0     x000D                      previous previous length -1  length     chunkSize    x000D                  chunk       x000D                  previous push chunk   x000D                x000D              else   x000D                  chunk   previous previous length -1   x000D                x000D              chunk push current   x000D              return previous  x000D                  x000D        x000D      x000D   x000D  console log   a    b    c    d    e   chunk 4    x000D     prints      a    b    c   d        e      x000D   x000D   x000D

User · Answer

I think this a nice recursive solution with ES6 syntax    x000D   x000D  const chunk   function array  size    x000D    if   array length    x000D      return     x000D      x000D    const head   array slice 0  size   x000D    const tail   array slice size   x000D   x000D    return  head     chunk tail  size    x000D     x000D   x000D  console log chunk  1 2 3   2    x000D   x000D   x000D

User · Answer

The one line in pure javascript   x000D   x000D  function chunks array  size      return Array apply 0  length  Math ceil array length   size    map     index    gt  array slice index size   index 1  size         The following will group letters of the alphabet by 4 console log chunks     Array 26   map  x i   gt String fromCharCode i   97    4   x000D   x000D   x000D

User · Answer

Super late to the party but I solved a similar problem with the approach of using  join  quot  quot   to convert the array to one giant string  then using regex to  match    1 7    it into arrays of substrings of max length 7  const arr     abc    def    gh    ijkl    m    nopq    rs    tuvwx    yz    const arrayOfSevens   arr join  quot  quot   match    1 7  g        quot abcdefg quot    quot hijklmn quot    quot opqrstu quot    quot vwxyz quot    Would be interesting to see how this performs in a speed test against other methods

User · Answer

I just wrote this with the help of a groupBy function    x000D   x000D     utils x000D  const group    source    gt     x000D    by   grouping    gt    x000D      const groups   source reduce  accumulator  item    gt    x000D        const name   JSON stringify grouping item    x000D        accumulator name    accumulator name         x000D        accumulator name  push item   x000D        return accumulator  x000D              x000D   x000D      return Object keys groups  map key   gt  groups key    x000D      x000D      x000D   x000D  const chunk    source  size    gt  group source map  item  index    gt     item  index      x000D   by x   gt  Math floor x index   size   x000D   map x   gt  x map v   gt  v item    x000D   x000D   x000D     103 items x000D  const arr    6 2 6 6 0 7 4 9 3 1 9 6 1 2 7 8 3 3 4 6 8 7 6 9 3 6 3 5 0 9 3 7 0 4 1 9 7 5 7 4 3 4 8 9 0 5 1 0 0 8 0 5 8 3 2 5 6 9 0 0 1 5 1 7 0 6 1 6 8 4 9 8 9 1 6 5 4 9 1 6 6 1 8 3 5 5 7 0 8 3 1 7 1 1 7 6 4 9 7 0 5 1 0   x000D   x000D  const chunks   chunk arr  10   x000D   x000D  console log JSON stringify chunks    x000D   x000D   x000D

User · Answer

And this would be my contribution to this topic  I guess  reduce   is the best way    x000D   x000D  var segment    arr  n    gt  arr reduce  r e i    gt  i n    r r length-1  push e   r  x000D                                                         r push  e    r        x000D          arr   Array from  length  31   map    i    gt  i 1   x000D          res   segment arr 7   x000D  console log JSON stringify res    x000D   x000D   x000D    But the above implementation is not very efficient since  reduce   runs through all arr function  A more efficient approach  very close to the fastest imperative solution  would be  iterating over the reduced  to be chunked  array since we can calculate it s size in advance by Math ceil arr n    Once we have the empty result array like Array Math ceil arr length n   fill    the rest is to map slices of the arr array into it    x000D   x000D  function chunk arr n   x000D    var r   Array Math ceil arr length n   fill    x000D    return r map  e i    gt  arr slice i n  i n n    x000D    x000D   x000D  arr   Array from  length  31     i    gt  i 1   x000D  res   chunk arr 7   x000D  console log JSON stringify res    x000D   x000D   x000D

User · Answer

Nowadays you can use lodash  chunk function to split the array into smaller arrays https   lodash com docs chunk No need to fiddle with the loops anymore

[javascript] Split array into chunks

Examples related to javascript

Examples related to arrays

Examples related to split