Problema: escriba una función que divida una matriz (primer argumento) en grupos de la longitud del tamaño (segundo argumento) y los devuelva como una matriz bidimensional.
¿Por qué mi variable test2 no funciona?
function chunkArrayInGroups(arr, size) { let resArr = []; for (let i = 0; i < arr.length; i++) { resArr.push(arr.splice(0, size)); } return resArr; } let test = chunkArrayInGroups(["a", "b", "c", "d"], 2); console.log(test); // returns correct [["a", "b"], ["c", "d"]] let test2 = chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2); console.log(test2); // should return [[0, 1], [2, 3], [4, 5]] //but returns [[0, 1], [2, 3]]
¿Por qué?
¡Gracias!
arr.length
cambiando en cada iteración. Y con el incremento i
no llena la condición por completo.
Pruebe el siguiente fragmento
function chunkArrayInGroups(arr, size) { let resArr = []; while (arr.length) { resArr.push(arr.splice(0, size)); } return resArr; } let test = chunkArrayInGroups(["a", "b", "c", "d"], 2); console.log(test); let test2 = chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2); console.log(test2);
Como estamos usando splice
, estamos modificando la longitud de la matriz original, lo que significa que no debemos confiar en ella para recorrerla. En su lugar, debemos recorrer un rango equivalente a la longitud de la matriz que queremos devolver, que se puede calcular simplemente dividiendo inputArr.length / size
.
Puede crear un "rango" y recorrerlo con un bucle for..of
usando Array(number).keys()
const caseOne = ['a', 'b', 'c', 'd']; const caseTwo = [0, 1, 2, 3, 4, 5]; const caseThree = [1, 'hi', 3, 9, 'a', { hello: 'world' }, 7563, 'c', 3, [1, 2, 3]]; const chunkArray = (arr, num) => { // The final array we'll push to const final = []; // Loop through the future length of the "final" array for (const _ of Array(Math.ceil(arr.length / num)).keys()) { final.push(arr.splice(0, num)); } return final; }; console.log(chunkArray(caseOne, 2)); console.log(chunkArray(caseTwo, 2)); console.log(chunkArray(caseThree, 3));
También puedes usar el método reduce
:
const caseOne = ['a', 'b', 'c', 'd']; const caseTwo = [0, 1, 2, 3, 4, 5]; const caseThree = [1, 'hi', 3, 9, 'a', { hello: 'world' }, 7563, 'c', 3, [1, 2, 3]]; const chunkArray = (arr, num) => { return [...Array(Math.ceil(arr.length / num)).keys()].reduce((acc) => { acc.push(arr.splice(0, num)); return acc; }, []); }; console.log(chunkArray(caseOne, 2)); console.log(chunkArray(caseTwo, 2)); console.log(chunkArray(caseThree, 3));
Está utilizando un índice i
que avanza un elemento, pero mientras tanto está eliminando dos por ciclo, por lo que el índice cae más allá de la longitud de la matriz antes de lo esperado.
En lugar de usar un for
indexado, solo use una condición while
que verifique si su matriz está vacía o no. Si no está vacío, continúe splice
:
function chunkArrayInGroups(arr, size) { let resArr = []; while (arr.length > 0) { resArr.push(arr.splice(0, size)); } return resArr; } let test = chunkArrayInGroups(["a", "b", "c", "d"], 2); console.log(test); let test2 = chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2); console.log(test2);