¿Cómo imprimir o enumerar propiedades de un objeto JavaScript?

En esta publicación, exploraremos todas las opciones para iterar e imprimir propiedades de un objeto JavaScript. Normalmente me encuentro con los siguientes requisitos,

• ¿Cómo imprimir el nombre de todas las propiedades de un objeto?
• ¿Cómo imprimir solo los métodos de un objeto?
• ¿Cómo imprimir incluso propiedades no enumerables de un objeto?

Consideremos al gato objeto, como se muestra en la lista a continuación:

var cat= {
    name : 'foo',
    age : 12,
    canRun : function() {
        console.log("can run");
    }
}

Por defecto, para todas las propiedades de un objeto enumerable se establece como verdadero.  Así que ahora mismo, si imprimimos la descripción de cat's canRun y nombramos propiedades usando el Object.getOwnPropertyDescriptor, encontraremos un valor enumerable verdadero para ambas propiedades.

console.log(Object.getOwnPropertyDescriptor(cat,"canRun"));
console.log(Object.getOwnPropertyDescriptor(cat,'name'));

Como observas, además de enumerable, configurable y scribible también están configurados como verdadero.

Empecemos por imprimir todas las propiedades que enumerables son verdaderas.

Printing all enumerable properties using for..in loop

Podemos imprimir todas las propiedades enumerables, ya sean propias o heredadas del objeto cat, usando JavaScript para... en bucle.

for (var prop in cat) {
    console.log(prop);
}

Usando el para... en el bucle, todas las propiedades enumerables pueden iterarse.  Arriba, el bucle for imprimirá todas las propiedades enumerables del objeto gato.

JavaScript para... en bucle no itera propiedades no enumerables ni a propiedades que enumerable está configurada como falsa. Para entenderlo mejor, vamos a hacer que la propiedad nombre del gato sea enumerable a false usando la función Object.defineProperty.

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

En la lista anterior, hemos puesto enumerable of name property en false, y luego iterando hacia las propiedades usando el bucle for de JavaScript. En la salida, notarás que JavaScript ha omitido la propiedad de nombre, y dará la salida como se muestra en la imagen de abajo

JavaScript para... en loop itera a todas las propiedades enumerables de un objeto, independientemente de que sea su propia propiedad o propiedad heredada.  Veamos un ejemplo de cómo para... en el bucle también heredó propiedades enumerables. He creado un objeto llamado animal,

var animal= {
    color: "blue"
}

Estamos vinculando el objeto animal como padre del objeto gato usando el __proto__ . Así que estamos creando herencia entre el objeto gato y el objeto animal, como se muestra en la lista de abajo:

cat.__proto__ = animal;

Ahora, el objeto gato tiene tres propiedades enumerables. Tiene sus propias propiedades de edad y canRun, y heredó la propiedad de color. Así que lo para... en loop imprimirá las propiedades de edad, canRun y color para el objeto gato.

for (var prop in cat) {
    console.log(prop);
}

Arriba para... en loop imprimirá la propiedad de color de nosotros además de la edad y la propiedad de canRun.

A continuación, se encuentra todo el código utilizado en la discusión anterior,

var animal= {
    color: "blue"
}

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}
cat.__proto__=animal;

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

Así que podemos resumir para... en bucle en los siguientes puntos,

• Devuelve todas las propiedades enumerables propias del objeto
• Devuelve todas las propiedades enumerables heredadas del objeto
• No devuelve propiedades no enumerables

Imprimir todas las propiedades enumerables propias usando Object.keys

En ECMA 5, se introdujo Object.keys(), que devuelve un array que contiene todas las propiedades enumerables del objeto JavaScript. Solo devuelve las propiedades propias del objeto; no devuelve las propiedades heredadas.

Podemos imprimir todas las propiedades enumerables del objeto gato usando Objecy.keys, como se muestra en el listado a continuación.

var cat= {

    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

console.log(Object.keys(cat));

Impresión de todos los métodos de un objeto

Puede que tengamos otro requisito, simplemente imprimir todos los métodos propios de un objeto.  Para ello, creemos una función que devuelva todos los propios métodos de un objeto.

function getAllMethods(object) {
    return Object.getOwnPropertyNames(object).filter(function (p) {
            return typeof object[p]=='function';
        });
}

la función getAllMethods() devolverá todos los métodos del objeto pasado. Supongamos que tenemos un gato objeto como se muestra en la siguiente lista,

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

Para imprimir métodos del objeto cat, lo pasaremos a la función getAllMethods(), y la función devolverá el método canRun.

console.log(getAllMethods(cat));

En la salida podemos ver canRun impreso.

Conclusión

En esta publicación hemos aprendido sobre diversas formas de imprimir o enumerar las propiedades y métodos propios o heredados de un objeto. Espero que esta publicación te resulte útil. Gracias por leer.