Pregunta ¿Cómo enumerar las propiedades de un objeto de JavaScript?


Digamos que creo un objeto así:

var myObject =
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

¿Cuál es la mejor manera de recuperar una lista de los nombres de las propiedades? es decir, me gustaría terminar con algunas 'claves' variables tales que:

keys == ["ircEvent", "method", "regex"]

718
2017-10-16 10:08


origen


Respuestas:


En los navegadores modernos (IE9 +, FF4 +, Chrome5 +, Opera12 +, Safari5 +) puede usar el navegador integrado Object.keys método:

var keys = Object.keys(myObject);

Lo anterior tiene un relleno policristalino completo, pero una versión simplificada es:

var getKeys = function(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

Alternativamente reemplazar var getKeys con Object.prototype.keys para permitirte llamar .keys() en cualquier objeto. Extender el prototipo tiene algunos efectos secundarios y no recomendaría hacerlo.


909
2017-10-16 10:12



Como slashnick señalado, puede usar el constructo "for in" para iterar sobre un objeto para sus nombres de atributos. Sin embargo, estará iterando sobre todos los nombres de atributos en la cadena de prototipos del objeto. Si quieres iterar solamente sobre los propios atributos del objeto, puede hacer uso del Object # hasOwnProperty () método. Por lo tanto, teniendo lo siguiente.

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        /* useful code here */
    }
}

236
2017-10-16 13:00



Como Sam Dutton respondió, se ha introducido un nuevo método para este fin en ECMAScript 5th Edition. Object.keys() hará lo que quiera y es compatible con Firefox 4, Chrome 6, Safari 5 y IE 9.

También puede implementar fácilmente el método en navegadores que no lo admiten. Sin embargo, algunas de las implementaciones no son totalmente compatibles con Internet Explorer. Lo he detallado en mi blog y produjo una solución más compatible:

Object.keys = Object.keys || (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !{toString:null}.propertyIsEnumerable("toString"),
        DontEnums = [ 
            'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty',
            'isPrototypeOf', 'propertyIsEnumerable', 'constructor'
        ],
        DontEnumsLength = DontEnums.length;

    return function (o) {
        if (typeof o != "object" && typeof o != "function" || o === null)
            throw new TypeError("Object.keys called on a non-object");

        var result = [];
        for (var name in o) {
            if (hasOwnProperty.call(o, name))
                result.push(name);
        }

        if (hasDontEnumBug) {
            for (var i = 0; i < DontEnumsLength; i++) {
                if (hasOwnProperty.call(o, DontEnums[i]))
                    result.push(DontEnums[i]);
            }   
        }

        return result;
    };
})();

Tenga en cuenta que la respuesta aceptada actualmente no incluye un cheque para hasOwnProperty () y devolverá las propiedades que se heredan a través de la cadena de prototipos. Tampoco da cuenta del famoso error DontEnum en Internet Explorer, donde las propiedades no enumerables en la cadena del prototipo causan propiedades declaradas localmente con el mismo nombre para heredar su atributo DontEnum.

Implementar Object.keys () le dará una solución más sólida.

EDITAR: después de una discusión reciente con kangax, un conocido colaborador de Prototype, implementé la solución para el error DontEnum basado en el código para su Object.forIn() función encontrada aquí.


97
2017-10-14 20:35



Tenga en cuenta que Object.keys y otros métodos de ECMAScript 5 son compatibles con Firefox 4, Chrome 6, Safari 5, IE 9 y superior.

Por ejemplo:

var o = {"foo": 1, "bar": 2}; 
alert(Object.keys(o));

Tabla de compatibilidad ECMAScript 5: http://kangax.github.com/es5-compat-table/

Descripción de nuevos métodos: http://markcaudill.com/index.php/2009/04/javascript-new-features-ecma5/


28
2017-09-29 12:34



Object.getOwnPropertyNames(obj)

Esta función también muestra propiedades no enumerables además de las mostradas por Object.keys(obj).

En JS, cada propiedad tiene algunas propiedades, incluyendo un booleano enumerable.

En general, las propiedades no enumerables son más "internas" y se usan con menos frecuencia, pero es útil estudiarlas a veces para ver qué está sucediendo realmente.

Ejemplo:

var o = Object.create({base:0})
Object.defineProperty(o, 'yes', {enumerable: true})
Object.defineProperty(o, 'not', {enumerable: false})

console.log(Object.getOwnPropertyNames(o))
// [ 'yes', 'not' ]

console.log(Object.keys(o))
// [ 'yes' ]

for (var x in o)
    console.log(x)
// yes, base

También tenga en cuenta cómo:

  • Object.getOwnPropertyNamesy Object.keys  no lo hagas sube la cadena del prototipo para encontrar base
  • for in hace

Más sobre la cadena de prototipos aquí: https://stackoverflow.com/a/23877420/895245


17
2017-09-05 12:37



Soy un gran admirador de la función de volcado.

http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion alt text


16
2018-01-13 16:56



Podría hacerlo con jQuery de la siguiente manera:

var objectKeys = $.map(object, function(value, key) {
  return key;
});

14
2017-12-13 23:26