const els = { scoreInEl: null, //number <input> maxInEl: null, //number <input> percentInEl: null, //number <input> percentEl: null, //Output gradeEl: null, //Output scoreUp: null, //Output scoreDown: null, //Output percentOut: null //Output }; Object.keys(els).reduce((o, k) => (o[k] = document.querySelector("#" + k), o), els); //point of interest Así que aquí tengo este código que se ocupa del método .reduce() y me gustaría obtener más información sobre mi caso específico.
Entiendo que Object.keys toma todos y cada uno de los nombres del elemento, como scoreUp
Entonces, si observa la documentación de MDN sobre esto, dice que toma el último elemento y el primer elemento y serían o y k .
¿El o[k] hace que scoreUp: null; igual a algo, y qué lo hace igual.
Creo que no entiendo nada en el selector de consultas, o lo que significa cualquiera de los o o k en: document.querySelector("#" + k), o,), els) pero entiendo que el # significa un id css y que els es el objeto en sí mismo, y en este caso sería el valor inicial.
Hacer un console.log(Object.keys...) devuelve un montón de información confusa, pero por lo que puedo decir es similar a hacer algo como console.log(document.getElementById()
Lo que realmente quiero de esto es una respuesta a mis preguntas, o una mejor fuente que el MDN para explicarlo.
Entonces, si observa la documentación de MDN sobre esto, dice que toma el último elemento y el primer elemento y serían o y k.
No, en el código aquí:
.reduce((o, k) => o es el acumulador. es:
k es la clave que se está iterando. Dado que se proporciona un valor inicial, en la primera iteración, esta es la cadena 'scoreInEl' . En la segunda iteración, es la cadena 'maxInEl' . Etc.
Dado que está devolviendo o al final de cada devolución de llamada, y eso se refiere al valor inicial, el els el acumulador es el mismo cada vez.
Podría ser más claro eliminar el confuso operador de coma.
Object.keys(els).reduce((o, k) => { o[k] = document.querySelector("#" + k); return o; }, els); O, con iteración genérica en lugar de reduce (dado que el acumulador es el mismo cada vez, no tiene sentido usar reduce ):
Object.keys(els).forEach((k) => { els[k] = document.querySelector("#" + k); }); Eso es mucho, mucho más fácil de entender. No intente ser "complicado" usando reduce cuando no sea apropiado.
Repasemos primero lo que dices paso a paso y veamos si es verdadero o falso.
Entiendo que Object.keys toma todos y cada uno de los nombres del elemento, como
scoreUp
Sí, Object.keys devuelve una matriz de las claves de un objeto.
Entonces, si observa la documentación de MDN sobre esto, dice que toma el último elemento y el primer elemento y serían
oy `k.
No, eso es falso. En reduce, los primeros dos argumentos de la función de devolución de llamada son el acumulador (el objeto de salida, o en qué se reduce todo en la matriz) y el elemento actual en la matriz.
¿El
o[k]hace quescoreUp: null;igual a algo, y qué lo hace igual.
El o[k] accede al par clave/valor en el objeto o siendo la clave el valor de k . No 'hace scoreUp: null; igual a algo', simplemente es una notación estándar de acceso a la propiedad.
No necesita usar reduce aquí; solo es necesario cuando desea manipular (generalmente agrupar) elementos de una matriz. Esto es modificar cada par clave/valor en un objeto. Para eso, recomendaría un bucle sobre Object.keys (observe el bucle, no use reduce ):
Object.keys(els).forEach(k => els[k] = document.querySelector("#" + k));O un bucle for-in que efectivamente hará lo mismo.
for (const k in els) { els[k] = document.querySelector("#" + k); }