JavaScript

Dividir array em partes com JavaScript (chunks)

28 de setembro de 2021

Dividir array em partes com JavaScript (chunks)

Neste artigo você vai aprender a como dividir array em partes utilizando JavaScript, estas partes são conhecidas como chunks

Dividir array em partes capa

Fala programador(a), beleza? Bora aprender mais sobre arrays e também JavaScript!

Vamos criar um recurso para realizar as divisões de um array em array menores, os chunks

Primeiramente vamos definir o número de divisões e receber um array, o original

Utilizaremos a função reduce para resolver o problema

Em reduce vamos criar novos arrays baseados na quantidade definida anteriormente, definindo um novo índice para cada uma das divisões

Assim inserimos itens neste novo array, até a quantidade chegar ao limite e o retornamos

Veja o exemplo prático:

const qty = 3

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const chunks = arr.reduce((array, item, index) => { 
  const chunkIndex = Math.floor(index/qty)

  if(!array[chunkIndex]) {
    array[chunkIndex] = []
  }

  array[chunkIndex].push(item)

  return array
}, [])

console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

Note que dividimos um array de 9 elementos em 3 arrays de 3 elementos, manipulando as variáveis iniciais

Reduce é uma ótima opção para o problema, pois ele justamente tem essa filosofia de “reduzir” algo

E ainda se a última parte não contiver elementos suficientes, não há problema o algoritmo resolve! 🙂

Conclusão

Neste artigo você aprendeu a como dividir array em partes com JavaScript

Utilizamos a função do reduce de JavaScript ES6 para resolver o nosso problema

Conseguindo assim entregar o número de chunks necessários, dividindo os elementos do array entre eles

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x