Cómo dividir una matriz en incluso trozos en JavaScript

En este tutorial, veremos cómo dividir una matriz o lista en partes iguales de tamaño N en JavaScript, usando slice() y splice(), con ejemplos.

Introducción

Las matrices son una de las estructuras más utilizadas en la programación de JavaScript, por lo que es importante conocer sus métodos integrados como la parte de atrás de su bolsillo.

En este tutorial, veremos cómo dividir una matriz en fragmentos de tamaño n en JavaScript.

Específicamente, veremos dos enfoques:

  1. Usando el método slice() y un bucle for
  2. Usando el método splice() y un bucle while

Dividir el arreglo en partes pares usando el método slice()

La forma más fácil de extraer un trozo de una matriz, o más bien, de dividirlo, es el método slice():

slice(start, end) - Devuelve una parte de la matriz invocada, entre los índices start y end.

Nota: Tanto start como end pueden ser números enteros negativos, lo que simplemente indica que están enumerados desde el final de la matriz. -1 es el último elemento de la matriz, -2 es el penúltimo y así sucesivamente...

La matriz devuelta por slice() devuelve una copia superficial, lo que significa que cualquier referencia dentro de la matriz original se copiará tal como está y no asignará memoria para objetos completamente nuevos.

Entonces, para dividir una lista o matriz en partes iguales, usemos el método slice():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sliceIntoChunks(arr, 3));

Ejecutar el código anterior produce el siguiente resultado:

1
[[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ]]

En el código anterior, descomponemos arr en fragmentos más pequeños de tamaño 3, iterando a través de la matriz y dividiéndola en cada chunkSize. En la última iteración, solo quedará un elemento (10), que tendrá que formar su propio fragmento.

Dividir la matriz en partes pares usando el método splice() {#dividir la matriz en partes pares usando el método de empalme}

Aunque el método splice() puede parecer similar al método slice(), su uso y efectos secundarios son muy diferentes. Miremos más de cerca:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Splice does the following two things:
// 1. Removes deleteCount elements starting from startIdx (in-place)
// 2. Inserts the provided new elements (newElem1, newElem2...) into myArray starting with index startIdx (also in-place)
// The return value of this method is an array that contains all the deleted elements
myArray.splice(startIdx, deleteCount, newElem1, newElem2...)

let arrTest = [2, 3, 1, 4]
let chunk = arrTest.splice(0,2)
console.log(chunk) // [2, 3]
console.log(arrTest) // [1, 4]

Veamos esto en acción a través de un ejemplo de código:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function spliceIntoChunks(arr, chunkSize) {
    const res = [];
    while (arr.length > 0) {
        const chunk = arr.splice(0, chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(spliceIntoChunks(arr, 2));

Ejecutar este código produce:

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

Aquí estamos usando un ciclo while para recorrer la matriz. En cada iteración, realizamos la operación de empalme y empujamos cada fragmento en una matriz resultante hasta que no queden más elementos en la matriz original (arr.length> 0).

Una cosa muy importante a tener en cuenta es que splice() cambia la matriz original. donde slice() crea una copia de la matriz original, por lo que no habrá ningún cambio en la original.

Conclusión

En este artículo, hemos repasado un par de formas sencillas de dividir una lista en partes iguales en JavaScript. Mientras lo hacíamos, aprendimos a trabajar con un par de métodos de matriz integrados como slice() y splice().