Tengo datos como este:
const cards = [ { name: "angular2" }, { name: "vue" }, { name: "react" }, { name: "grunt" }, { name: "phantomjs" } ]; Quiero duplicar y barajar esta matriz. También quiero agregar la propiedad de id a cada elemento.
const duplicateCards = (arr) => { const duplicatedArr = [...arr, ...arr]; for (let i = duplicatedArr.length - 1; i >= 0; i--) { duplicatedArr[i].id = i; randomIndex = Math.floor(Math.random() * i + 1); console.log(duplicatedArr[i]); [duplicatedArr[i], duplicatedArr[randomIndex]] = [duplicatedArr[randomIndex], duplicatedArr[i]]; } return duplicatedArr; }; La función duplicateCards(cards) devuelve una salida como esta:
[ { name: 'vue', id: 1 }, { name: 'angular2', id: 0 }, { name: 'vue', id: 1 }, { name: 'grunt', id: 7 }, { name: 'phantomjs', id: 4 }, { name: 'phantomjs', id: 4 }, { name: 'grunt', id: 7 }, { name: 'react' }, { name: 'react' }, { name: 'angular2', id: 0 } ] Probé el método concat() pero obtuve el mismo resultado. Quiero agregar una identificación única. ¿Cuál es mi error? ¿Como puedo resolver esto?
Esto sucede porque aunque distribuye la matriz con [...arr, ...arr] , creando una nueva matriz, las referencias a los objetos siguen siendo las mismas, por lo que ahora se hace referencia a cada objeto dos veces. Esto significa que cualquier mutación que haga (como la asignación a la propiedad id ) será visible en dos lugares de la matriz.
En segundo lugar, debe asignar la propiedad id antes de la fase en la que comienza a intercambiar, ya que puede encontrarse con el mismo objeto por segunda vez y luego asignarle una id diferente, mientras que otros objetos, que se intercambian al índice i , no obtendrán una id asignada.
Así es como podría funcionar, encadenando un .map en la matriz creada que crea nuevos objetos:
const duplicateCards = (arr) => { const duplicatedArr = [...arr, ...arr].map((o, id) => ({...o, id })); for (let i = duplicatedArr.length - 1; i >= 0; i--) { let randomIndex = Math.floor(Math.random() * i + 1); [duplicatedArr[i], duplicatedArr[randomIndex]] = [duplicatedArr[randomIndex], duplicatedArr[i]]; } return duplicatedArr; }; const cards = [ { name: "angular2" }, { name: "vue" }, { name: "react" }, { name: "grunt" }, { name: "phantomjs" } ]; console.log(duplicateCards(cards));