Neste tutorial mostraremos como dividir uma array em partes menores usando Javascript. Vamos criar dois exemplos para dividir um array em partes de "n" elementos, sendo que a última parte poderá conter menos elementos que os demais. No primeiro exemplo criaremos uma função padrão e no segundo exemplo utilizaremos apenas um laço for aplicado diretamente no script.

Array é um tipo de dados que pode receber mais de um elemento ao mesmo tempo, de tal forma que cada um dos elementos pode ser identificado por uma chave (índice). Portanto, esta estrutura de dados é também conhecida como variável indexada, vetor ou matriz.

1. Dividindo um array em partes menores utilizando uma função padrão

1.1. Para dividirmos um array em grupos de "n" elementos, vamos criar uma função padrão no qual denominaremos de array_chunk().

1.1.1. A função padrão array_chunk() irrá dividir um array em grupos menores de "n" elementos, retornando um novo array, indexado a partir de zero, que irá conter as partes divididas do array original. Lembrando que a última parte poderá conter menos elementos que as demais.

Função padrão

function array_chunk(arr, len) {
  let chunks = [], i = 0, n = arr.length
  while (i < n) {
    chunks.push(arr.slice(i, i += len))
  }
  return chunks
}

onde:

arr = nome do array original

len = número de elementos para cada parte dividida

Exemplo 1

1.2. No exemplo abaixo vamos dividir um array com letras do alfabeto (alphabet) em grupos menores de 2 elementos cada, onde utilizaremos a função padrão apresentada acima.

<h2>Dividir um array em partes menores</h2>

<div id="completo"></div>
<br/>
<div id="partesArray"></div>
<br/>
<div id="partes"></div>

<script>

let alphabet=["a","b","c","d","e"];

// função padrão
function array_chunk(arr, len) {
  let chunks = [], i = 0, n = arr.length
  while (i < n) {
    chunks.push(arr.slice(i, i += len))
  }
  return chunks
}

let partes = array_chunk(alphabet, 2) // divide o array em grupos de 2 elementos

let objectInStringFormat = JSON.stringify(partes) // formata partes em um string (para visualização)

// exibe na tela (manipulação DOM) 
document.querySelector('#completo').innerHTML = `
	<div>
    	<b>Array alphabet: </b> ${alphabet}
    </div>
`

document.querySelector('#partesArray').innerHTML = `
	<div>
        <b>Array partes: </b> ${objectInStringFormat}
    </div>
`

document.querySelector('#partes').innerHTML = `
	<div>
    	<b>Partes do array alphabet</b><br/>
    	<b>=> Parte 1: </b> ${partes[0]}<br/>
        <b>=> Parte 2: </b> ${partes[1]}<br/>
        <b>=> Parte 3: </b> ${partes[2]}<br/>

    </div>
`
</script>

Para melhor entendimento do código, faça o teste no aplicativo Squids Editor. Clique no botão [Run] para visualizar o resultado.

 1.3. Veja o resultado:

Observações:

1.3.1. Para fazer a divisão em partes menores utilizamos a função padrão array_chunk() que criamos anteriormente.

1.3.2. Como já mencionamos no início do tutorial, a última parte da divisão pode ter menos elementos que os demais. Observe no nosso exemplo que a última parte da divisão possui apenas um elemento e não 2 como foi definido, totalizando portanto, todos os 5 elementos que fazem parte do array original.

1.3.3. Para exibir o Array partes utilizamos o método JSON.stringify() que converte valores em JavaScript para uma String JSON. Este formato facilita a visualização do array exibindo-o de forma bem clara de como foi feita a divisão.

1.3.4. Para a exibição do resultado utilizamos o recurso de Templates Strings. Para saber mais, leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno.

1.3.5. Como o resultado da função padrão array_chunk() é um array indexado numericamente a partir de zero, precisamos informar qual o índice (ou chave) que desejamos obter: por exemplo: partes[0], partes[1] ou partes[2].

Na função array_chunk:

1.3.6. Criamos um array indexado derivado do array original utilizando os métodos push() e slice(), onde:

a) O método push() adiciona um ou mais elementos ao final de um array.

b) O método slice() retorna parte de um array a partir dos parâmetros de início e fim.

2. Dividindo um array utilizando um laço for diretamente

2.1. Assim como no tópico anterior em que utilizamos uma função, podemos dividir um array em grupos de "n" elementos, mas utilizando agora apenas um laço for diretamente no script. O laço for irá criar um novo array indexado numericamente, cujo seus elementos serão as partes divididas do array original. 

Exemplo 2

2.2. Como no exemplo anterior, vamos dividir um array com letras do alfabeto (alphabet) em grupos menores de 2 elementos cada, onde utilizaremos o laço for diretamente no script.

<h2>Dividir um array em partes menores</h2>

<div id="completo"></div>
<br/>
<div id="partesArray"></div>
<br/>
<div id="partes"></div>

<script>

let alphabet=["a","b","c","d","e"];

// laço for direto
let partes = [],  len = 2
for (let i = 0;  i < alphabet.length; i += len) {
  partes.push(alphabet.slice(i, i + len))
}

let objectInStringFormat = JSON.stringify(partes) // formata partes em um string (para visualização)

// exibe na tela (manipulação DOM) 
document.querySelector('#completo').innerHTML = `
	<div>
    	<b>Array alphabet: </b> ${alphabet}
    </div>
`

document.querySelector('#partesArray').innerHTML = `
	<div>
        <b>Array partes: </b> ${objectInStringFormat}
    </div>
`

document.querySelector('#partes').innerHTML = `
	<div>
    	<b>Partes do array alphabet</b><br/>
    	<b>=> Parte 1: </b> ${partes[0]}<br/>
        <b>=> Parte 2: </b> ${partes[1]}<br/>
        <b>=> Parte 3: </b> ${partes[2]}<br/>

    </div>
`
</script>

  Para melhor entendimento do código, faça o teste no aplicativo Squids Editor. Clique no botão [Run] para visualizar o resultado.

 2.2. Veja o resultado:

Documentação Oficial

1. [Método slice() - MDN Web Docs] » Sobre a o método slice()

2. [Método push() - MDN Web Docs] » Sobre a o método push()

3. [Método JSON.stringify() - MDN Web Docs] » Sobre a o método JSON.stringfy()