Divida um array em pedaços em JavaScript

1. Divida um array usando o método slice() em JavaScript
2. Separando cada elemento de um array usando o método slice() e forEach Loop em JavaScript

Em JavaScript, brincar com arrays e executar várias operações nos arrays, seja a inserção, exclusão ou manipulação de dados dentro de um array, são coisas muito comuns que todo programador deve saber.

A linguagem JavaScript torna nossa vida muito mais fácil, fornecendo-nos várias funções embutidas incríveis que nos permitem brincar e modificar a estrutura de dados do array. Um desses métodos que discutiremos neste artigo é a função slice(). Com esse método, podemos facilmente dividir ou dividir um array inteiro em vários blocos.

Divida um array usando o método slice() em JavaScript

O método slice() é usado para fatiar ou dividir um array em pedaços menores. Esta função recebe dois parâmetros como entrada, start e end. O start representa o índice inicial de onde você deseja começar a fatiar o array, e o end representa em qual índice você deseja parar de fatiar ou dividir.

Neste processo, observe que a divisão irá parar um índice antes do índice end que você especificou. Por exemplo, se você definiu end como 5, o método irá parar de fatiar um índice antes, ou seja, no índice 4.

Depois que o fatiamento é feito, a matriz original permanece inalterada. Os navegadores modernos suportam esse método.

No exemplo de código abaixo, temos um array chamada numbersArr, que é do tipo inteiros. Podemos passar os parâmetros start e end para dividir ou dividir este array. Aqui, passamos 2 e 5 como os parâmetros start e end.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbersArr.slice(2, 5));
console.log('Original Array: ', numbersArr);

Resultado:

[3, 4, 5]
Original Array: [1, 2, 3, 4, 5, 6, 7, 8]

Como no índice 2, temos o número do elemento 3 e um índice antes do índice 5, temos um número do elemento 5. Portanto, o método slice() dividirá este array e obteremos a saída como [3, 4, 5]. Como já discutido, o array original permanece inalterado e, portanto, se imprimirmos o array numbersArr, obteremos o array inteiro com todos os elementos presentes como saída.

Ambos os parâmetros start e end são opcionais. Se você não especificar a posição start, o método slice() terá 0 como seu valor padrão. Se você não especificar a posição end, ele irá para o último elemento do array com a ajuda do método array.length.

Separando cada elemento de um array usando o método slice() e forEach Loop em JavaScript

Para dividir ou dividir todos os elementos do array, podemos usar o método slice() e o loop for. Você também pode usar um loop for aqui - não é um problema. Além disso, também temos o mesmo array numbersArr. Sempre que usamos um loop forEach em um array, temos que passar funções de retorno de chamada, que nos fornecerão duas coisas: primeiro é o próprio elemento de um array e o segundo é seu índice. A cada iteração, examinaremos cada elemento de um array e obteremos seu respectivo índice.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

numbersArr.forEach((value, index) => {
  console.log(numbersArr.slice(index, index + 1));
});

Resultado:

[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
[ 5 ]
[ 6 ]
[ 7 ]
[ 8 ]

Vamos passar esse valor index como um parâmetro start e index + 1 como o parâmetro final para o método slice(). Assim, por exemplo, se o valor do índice for 0, então index + 1 torna-se 0 + 1 = 1. E como sabemos que o método slice() irá parar um elemento antes do índice final, queremos dividir todos os elementos do array aqui; portanto, inicialmente passaremos split(0,1) para que o método pegue um elemento por vez do array e o imprima.

Na segunda iteração, será split(1,2). A terceira iteração será split(2,3) e assim por diante até chegar ao final do array.

Dessa forma, seremos capazes de dividir cada elemento de um array em vários blocos. Se quiser acessar esses elementos individuais posteriormente em seu código, você também pode armazenar esses elementos criando matrizes separadas para cada elemento, dependendo de suas necessidades.