Mostrar el orden original de las propiedades del objeto en console.log

2 minutos de lectura

avatar de usuario
MTK

Necesito un poco de depuración para ver el orden original de las propiedades de un objeto de JavaScript pero (al menos en las herramientas de desarrollo de Chrome) console.log() me muestra un objeto ordenado alfabéticamente.

Ex:

var obj = {
    z: 1,
    t: 2,
    y: 3,
    a: 4,
    n: 5,
    k: 6
}

console.log(obj) muestra esto:

Object {z: 1, t: 2, y: 3, a: 4, n: 5…}
a:4
k:6
n:5
t:2
y:3
z:1

//expected (needed ) original order
z: 1
t: 2
y: 3
a: 4
n: 5
k: 6

  • ¿De verdad crees que las propiedades de los objetos de JavaScript tienen un orden?

    – Gerardo Furtado

    20 de agosto de 2016 a las 13:39

  • Los objetos son colecciones desordenadas. Nunca hay un garantizar que obtendrá cualquier orden en particular. Parece que su enfoque para la depuración puede necesitar ser ajustado.

    usuario1106925

    20 de agosto de 2016 a las 13:39


  • Tienes que usar una matriz, porque el objeto no garantiza que las propiedades tengan el mismo orden cada vez que iteras sobre ellas. Las matrices garantizan ese orden.

    – Hamburguesa

    20 de agosto de 2016 a las 13:41

  • Estos comentarios están tan desactualizados…

    – Klesun

    15 de diciembre de 2020 a las 14:09

  • Sí, estos comentarios están desactualizados, ¡pero es útil decir por qué! Aquí hay una buena respuesta para confirmar que, de hecho, tienen un pedido stackoverflow.com/a/31102605/16940. Sin embargo, tenga cuidado porque Chrome devtools ORDENA las propiedades en el inspector, lo que puede no ser el orden en que se agregaron o se repetirán. ¡Esto puede aumentar enormemente la confusión hasta que se dé cuenta de lo que está sucediendo! (o si lo olvidas)

    – Simón_Weaver

    14 de julio de 2021 a las 8:05


avatar de usuario
jorge

console.log de hecho ordena las propiedades, en algunos casos puede usar JSON.stringify que preserva el orden, por ejemplo

console.log(JSON.stringify(obj, null /*replacer function */, 4 /* space */))

NB: contrariamente a la creencia popular, los objetos js mantienen el orden de enumeración, según el Especificación OwnPropertyKeys (enteros primero, luego otras propiedades en orden de inserción)

  • Lamentablemente, no puede colapsar las teclas con este enfoque.

    – Klesun

    20 de abril de 2018 a las 16:35

avatar de usuario
Observablerxjs

Otra solución fácil sería:

console.log(Object.entries(obj).map(k=>({[k[0]]:k[1]})))

Si necesita registrar un objeto muy grande para poder contraer claves, otra opción sería transformarlo en matrices de pares clave-valor.

let keepKeyOrder = function(obj) {
    if (typeof obj === 'object' && !Array.isArray(obj)) {
        let transformKey = (k) => [k, keepKeyOrder(obj[k])];
        return Object.keys(obj).map(transformKey);
    } else {
        return obj;
    }
};

console.log(keepKeyOrder({a:3,c:4,b:{b3:123,b2:234,b1:345}}));

Salidas:

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad