Dividir un array en fragmentos en JavaScript

1. Dividir un array usando el método slice() en JavaScript
2. Separación de cada elemento de un array usando el método slice() y el bucle forEach en JavaScript

En JavaScript, jugar con matrices y realizar varias operaciones en los arrays, ya sea la inserción, eliminación o manipulación de datos dentro de un array, son cosas muy comunes que todo programador debería saber.

El lenguaje JavaScript nos hace la vida mucho más fácil al proporcionarnos varias funciones integradas increíbles que nos permiten jugar y modificar con la estructura de datos del array. Uno de esos métodos que discutiremos en este artículo es la función slice(). Con este método, podemos dividir o dividir fácilmente un array completa en varios trozos.

Dividir un array usando el método slice() en JavaScript

El método slice() se utiliza para cortar o dividir un array en trozos más pequeños. Esta función toma dos parámetros como entrada, start y end. El start representa el índice inicial desde donde desea comenzar a cortar el array, y el end representa en qué índice desea dejar de cortar o dividir.

En este proceso, tenga en cuenta que la división se detendrá un índice antes del índice end que especificó. Por ejemplo, si ha definido end como 5, el método dejará de dividir un índice antes, es decir, en el índice 4.

Una vez que se realiza el corte, el array original permanece sin cambios. Los navegadores modernos admiten este método.

En el siguiente ejemplo de código, tenemos un array llamada numbersArr, que es del tipo integers. Podemos pasar los parámetros start y end para dividir o dividir esta matriz. Aquí, hemos pasado 2 y 5 como parámetros de start y end.

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

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

Producción :

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

Dado que en el índice 2, tenemos el número de elemento 3 y un índice antes del índice 5, tenemos un número de elemento 5. Entonces, el método slice() dividirá esta matriz y obtendremos la salida como [3, 4, 5]. Como ya se discutió, el array original permanece sin cambios, por lo que si imprimimos el array numbersArr, obtendremos el array completa con todos los elementos presentes como salida.

Ambos parámetros start y end son opcionales. Si no especifica la posición de start, el método slice() tomará 0 como valor predeterminado. Si no especifica la posición end, irá al último elemento del array con la ayuda del método array.length.

Separación de cada elemento de un array usando el método slice() y el bucle forEach en JavaScript

Para dividir o dividir todos los elementos del array, podemos usar tanto el método slice() como el bucle for. También puede utilizar un bucle for aquí; no es un problema. Además, también tenemos la misma matriz numbersArr. Siempre que usamos un bucle forEach en un array, tenemos que pasar funciones de devolución de llamada, que nos proporcionarán dos cosas: primero es el elemento de un array en sí, y la segunda es su índice. En cada iteración, revisaremos cada elemento de un array y obtendremos su índice respectivo.

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

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

Producción :

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

Pasaremos ese valor de index como parámetro de start y index + 1 como parámetro de finalización del método slice(). Entonces, por ejemplo, si el valor del índice es 0, entonces index + 1 se convierte en 0 + 1 = 1. Y como sabemos que el método slice() detendrá un elemento antes del índice final, queremos dividir cada elemento del array aquí; por lo tanto, inicialmente pasaremos split(0,1) para que el método tome un elemento a la vez del array y lo imprima.

En la segunda iteración, será split(1,2). La tercera iteración será split(2,3) y así sucesivamente hasta que llegue al final del array.

De esta manera, podremos dividir cada elemento de un array en varios fragmentos. Si desea acceder a estos elementos individuales más adelante en su código, también puede almacenar estos elementos creando matrices separadas para cada elemento según sus necesidades.