Dividi un array in blocchi in JavaScript

1. Dividere un array utilizzando il metodo slice() in JavaScript
2. Separazione di ogni elemento di un array utilizzando il metodo slice() e il bucle forEach in JavaScript

In JavaScript, giocare con gli array ed eseguire varie operazioni sugli array, che si tratti di inserimento, cancellazione o manipolazione dei dati all’interno di un array, sono cose molto comuni che ogni programmatore dovrebbe sapere.

Il linguaggio JavaScript rende la nostra vita molto più semplice fornendoci varie fantastiche funzioni integrate che ci consentono di giocare e modificare con la struttura dei dati dell’array. Uno di questi metodi di cui parleremo in questo articolo è la funzione slice(). Con questo metodo, possiamo facilmente dividere o dividere un intero array in vari blocchi.

Dividere un array utilizzando il metodo slice() in JavaScript

Il metodo slice() viene utilizzato per affettare o dividere un array in blocchi più piccoli. Questa funzione accetta come input due parametri, start e end. L’start rappresenta l’indice iniziale da cui si desidera iniziare a suddividere l’array e la end rappresenta l’indice in cui si desidera interrompere l’affettatura o la divisione.

In questo processo, tieni presente che lo slicing si fermerà un indice prima dell’indice end specificato. Ad esempio, se hai definito end come 5, il metodo smetterà di affettare un indice prima, cioè all’indice 4.

Al termine dello slicing, l’array originale rimane invariato. I browser moderni supportano questo metodo.

Nell’esempio di codice seguente, abbiamo un array chiamato numbersArr, che è del tipo interi. Possiamo passare i parametri start e end per dividere o dividere questo array. Qui abbiamo passato 2 e 5 come parametri start e end.

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

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

Produzione:

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

Poiché all’indice 2, abbiamo l’elemento numero 3 e un indice prima dell’indice 5, abbiamo un elemento numero 5. Quindi, il metodo slice() dividerà questo array e otterremo l’output come [3, 4, 5]. Come già discusso, l’array originale rimane invariato, quindi se stampiamo l’array numbersArr, otterremo l’intero array con tutti gli elementi presenti come output.

Entrambi i parametri start e end sono opzionali. Se non specifichi la posizione start, il metodo slice() prenderà 0 come valore predefinito. Se non specifichi la posizione end, andrà all’ultimo elemento dell’array con l’aiuto del metodo array.length.

Separazione di ogni elemento di un array utilizzando il metodo slice() e il bucle forEach in JavaScript

Per dividere o dividere tutti gli elementi dell’array, possiamo usare sia il metodo slice() che il cicli for. Puoi anche usare un cicli for qui - non è un problema. Inoltre, abbiamo anche lo stesso array numbersArr. Ogni volta che usiamo un bucle forEach su un array, dobbiamo passare funzioni di call-back, che ci forniranno due cose: il primo è l’elemento di un array stesso e il secondo è il suo indice. Ad ogni iterazione, esamineremo ogni elemento di un array e otterremo il rispettivo indice.

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

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

Produzione:

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

Passeremo quel valore index come parametro start e index+1 come parametro end al metodo slice(). Quindi, ad esempio, se il valore dell’indice è 0 allora index + 1 diventa 0 + 1 = 1 . E poiché sappiamo che il metodo slice() fermerà un elemento prima dell’indice finale, qui vogliamo dividere ogni elemento dell’array; quindi, inizialmente passeremo split(0,1) in modo che il metodo prenda un elemento alla volta dall’array e lo stampi.

Nella seconda iterazione, sarà split(1,2). La terza iterazione sarà split(2,3) e così via fino a raggiungere la fine dell’array.

In questo modo, saremo in grado di dividere ogni elemento di un array in vari blocchi. Se desideri accedere a questi singoli elementi in un secondo momento nel tuo codice, puoi anche memorizzare questi elementi creando array separati per ogni elemento a seconda delle tue esigenze.