Obtener todas las claves de un objeto JavaScript

3 minutos de lectura

avatar de usuario de tishma
tismá

Me preguntaba si había una forma rápida de extraer claves de una matriz asociativa en una matriz o una lista separada por comas usando JavaScript (jQuery está bien).

options = {key1: "value1", key2: "value2"};

El resultado debe ser la matriz:

["key1", "key2"]

o simplemente una cadena:

"key1, key2"

  • creo que quisiste decir ["key1","key2"] no {"key1","key2"}

    – epascarello

    9 de diciembre de 2010 a las 15:48


  • posible duplicado de Cómo enumerar las propiedades de un objeto javascript

    – Andy E.

    9 de diciembre de 2010 a las 16:04

  • Está. Lástima que la matriz nunca se menciona allí.

    – tismá

    9 de diciembre de 2010 a las 16:20

  • Eso es porque no existe una matriz asociativa en JavaScript. Lo que llamas una matriz asociativa es un objeto con una lista de propiedades (por lo tanto, cómo listar las propiedades de un objeto javascript). Esa es también la razón por la cual el método nativo para enumerar las claves reside en el Object objeto – Objeto.claves().

    – Andy E.

    9 de diciembre de 2010 a las 16:39


Puede obtener fácilmente una variedad de ellos a través de un for bucle, por ejemplo:

var keys = [];
for(var key in options) {
  if(options.hasOwnProperty(key)) { //to be safe
    keys.push(key);
  }
}

Entonces usa keys como quieras, por ejemplo:

var keyString = keys.join(", ");

Puedes probarlo aquí. los .hasOwnProperty() verificar es estar seguro, en caso de que alguien se meta con el prototipo del objeto y tal.

avatar de usuario de pwl
pwl

options = {key1: "value1", key2: "value2"};
keys = Object.keys(options);

  • Tenga en cuenta que esto no es compatible con IE8 e inferior, actualmente el 7,3% de los navegadores en todo el mundo.

    – Michel Muller

    31 de enero de 2014 a las 9:38

  • IE8 e inferiores ahora representan aproximadamente el 1% de los navegadores en todo el mundo.

    – Stephen Ostermiller

    13 de marzo de 2016 a las 10:37


Una forma jQuery de hacerlo:

var keys = [];
options = {key1: "value1", key2: "value2"};
$.each(options, function(key, value) { keys.push(key) })
console.log(keys)

  • también puedes usar llaves[keys.length] = clave; para ser IE seguro

    – Ege Ozcan

    9 de diciembre de 2010 a las 15:48


Avatar de usuario de Andy E
Andy E.

La mayoría de los principales navegadores tienen esta funcionalidad integrada ahora, el método es Object.keys():

var keys = Object.keys(options);
//-> ["key1", "key2"]

También puede usar un pequeño fragmento para implementar esto en los navegadores que no lo admiten:

Object.keys = Object.keys || (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty;

    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);
        }

        return result;
    };
})();

Ese fragmento funciona de manera muy similar al del ejemplo de Nick Craver con 2 excepciones:

  • Lanzará un TypeError significativo si pasa algo que no sea un objeto (o “matriz asociativa”, si lo desea).
  • Resolverá un molesto problema relacionado con DOM en Internet Explorer donde las colecciones no tienen la hasOwnProperty método.

Sin embargo, esto (y las otras respuestas aquí) no solucionan un error de enumeración de IE. Puede encontrar más información y una solución parcial para eso en esta respuesta aquí.

Ahora puedes usar

Object.keys(obj)

para obtener una matriz que consta de las claves disponibles en un objeto. Mozilla tiene información de uso y disponibilidad.

Avatar de usuario de Pointy
puntiagudo

Puedes usar $.each() en jQuery:

function keyArray(obj) {
  var rv = [];
  $.each(options, function(key) { rv.push(key); });
  return rv;
}

después

var keys = keyArray(options);

te dio ["key1", "key2"] como una matriz, que podría join para obtener una cadena.

¿Ha sido útil esta solución?