0
113
ViewsOrden de las teclas en la vista expandida frente a la contraída en la consola de Chrome
Mientras trabajaba en otro problema , me engañó el hecho de que Chrome (y quizás otros navegadores) de alguna manera ordena mágicamente las claves de un objeto cuando lo envía a la consola:
let inputs = ["XMl", "SFJ", "dTg", "amN"]; let promises = {}; for (let val of inputs) { let p = new Promise( (resolve) => setTimeout(resolve, 500 + Math.random() * 1500, "new:" + val) ); promises[val] = p } console.log(promises) Promise.allSettled(Object.values(promises)).then((res) => console.log(res))Ahora el navegador (Chrome) me muestra:
Entonces, hay una diferencia entre la salida expandida y colapsada. ¿Es ese el comportamiento estándar? ¿De donde viene esto?
1 answers
Answer question0
Aquí hay una réplica más simple del problema:
const obj = { XMl: 1, SFJ: 1, dTg: 1, amN: 1, }; console.log(obj);Por lo que obtengo:
El resumen parece mostrarse en orden de propiedad (más sobre eso en un momento), pero luego, cuando se muestran los detalles del objeto, las herramientas de desarrollo de Chrome muestran las propiedades en orden alfabético (incluida la agrupación de mayúsculas; se parece mucho al orden simple < y > haría, en lugar de localeCompare o similar). Firefox tiene un aspecto similar.
El primero está cubierto por la especificación de JavaScript ( detalles aquí ). No creo que haya ningún estándar que cubra el segundo, pero si lo piensas bien, el orden alfa probablemente sea más útil que el orden de propiedades cuando intentas encontrar una propiedad en un objeto con muchas propiedades. El orden de las propiedades es complicado y solo se basa principalmente en el orden en que se crearon las propiedades, por lo que puede parecer caótico. Y agrupar las mayúsculas categoriza ligeramente, dada la convención de JavaScript de que las letras mayúsculas iniciales se reservan casi por completo para las funciones de construcción y todas las mayúsculas constantes.
Originalmente usó el término "matriz asociativa" en lugar de objeto. Como mencioné en un comentario, en realidad son objetos, no solo matrices asociativas. Si quisiera simplemente un estilo básico de pares de nombre/valor de "mapa", sería un Map y el orden de las entradas del mapa es agradable y simple: es el orden en que se creó la entrada. Si hacemos lo mismo que hicimos anteriormente pero con un Map , tanto el resumen como el detalle muestran la información en el mismo orden:
const map = new Map([ ["XMl", 1], ["SFJ", 1], ["dTg", 1], ["amN", 1], ]); console.log(map); 