En este post voy a explicar cómo partir o dividir un arreglo en trozos, es decir, a partir de un arreglo, crear un arreglo de arreglos que tengan determinados elementos. Todo esto usando JavaScript (funciona en el navegador y en Node.Js)
Por ejemplo, tengo un arreglo de 8 elementos y lo reparto en pedazos de 3, formando un arreglo de 3 arreglos, los dos primeros tendrán 3 elementos y el último 2; justo como se ve en la imagen:
Lo único que usaremos será la función slice
, push
y ciclos for
. Cabe mencionar que podremos cambiar la longitud de los pedazos y que no importa el tipo de dato de los arreglos.
Para extraer los elementos usamos la función slice
que toma un inicio y un fin, y regresa los elementos del arreglo que se encuentren en ese rango, sin modificar al arreglo original.
Hacemos un ciclo que va desde 0 hasta la longitud del arreglo, pero no aumentamos el índice en 1, sino en la cantidad de elementos que queremos partir.
Y al extraer los elementos del arreglo los obtenemos desde el índice hasta el índice + el número de elementos en los que lo vamos a partir
.
Finalmente, una vez que hemos extraído un trozo del arreglo, lo agregamos al arreglo de arreglos usando la función push
.
Al final el código completo queda como se ve abajo. Recuerda que puedes cambiar la constante, y que no importa si tu arreglo tiene menos elementos que los que se van a extraer.
let arregloOriginal = ["PHP", "JavaScript", "Go", "Rust", "Java", "C", "CSS", "Python"],
arregloDeArreglos = []; // Aquí almacenamos los nuevos arreglos
console.log("Arreglo original: ", arregloOriginal);
const LONGITUD_PEDAZOS = 3; // Partir en arreglo de 3
for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
arregloDeArreglos.push(pedazo);
}
console.log("Arreglo de arreglos: ", arregloDeArreglos);
Al ejecutar el código la salida es la de la imagen que está al inicio del post.
Te invito a leer más sobre JavaScript.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.
Ver comentarios
Me salvaste la vida, buen post... gracias
Muchas gracias, muy claro y conciso! Saludos.