¿Cómo obtener las propiedades de un objeto en JavaScript / jQuery?

En JavaScript / jQuery, si tengo alertalgún objeto, obtengo [object]o [object Object]

¿Hay alguna forma de saber?

1. ¿Cuál es la diferencia entre estos dos objetos?

2. que tipo de objeto es este

3. qué propiedades contiene este objeto y valores de cada propiedad

?

Puede buscar las claves y los valores de un objeto invocando el for inbucle nativo de JavaScript :

var obj = {
    foo:    'bar',
    base:   'ball'
};

for(var key in obj) {
    alert('key: ' + key + '\n' + 'value: ' + obj[key]);
}

o usando el .each()método de jQuery :

$.each(obj, function(key, element) {
    alert('key: ' + key + '\n' + 'value: ' + element);
});

Con la excepción de seis tipos primitivos , todo en ECMA- / JavaScript es un objeto. Matrices; funciones; todo es un objeto. Incluso la mayoría de esas primitivas son en realidad también objetos con una selección limitada de métodos. Se lanzan en objetos debajo del capó, cuando es necesario. Para conocer el nombre de la clase base, puede invocar el Object.prototype.toStringmétodo en un objeto, como este:

alert(Object.prototype.toString.call([]));

Lo anterior saldrá [object Array].

Hay varios otros nombres de las clases, como [object Object], [object Function], [object Date], [object String], [object Number], [object Array], y [object Regex].

Para obtener una lista de propiedades / valores del objeto:

1. En Firefox - Firebug:

   console.dir(<object>);

2. JS estándar para obtener claves de objeto prestadas de Slashnick :

      var fGetKeys = function(obj){
         var keys = [];
         for(var key in obj){
            keys.push(key);
         }
         return keys;
      }
   
   // Example to call it:
   
      var arrKeys = fGetKeys(document);
   
      for (var i=0, n=arrKeys.length; i<n; i++){
         console.log(i+1 + " - " + arrKeys[i] + document[arrKeys[i]] + "\n");
      }

Ediciones:

1. <object> en lo anterior debe reemplazarse con la referencia variable al objeto.
2. console.log() se va a utilizar en la consola, si no está seguro de qué es, puede reemplazarlo con un alert()

i) cuál es la diferencia entre estos dos objetos

La respuesta simple es que [object]indica un objeto host que no tiene una clase interna. Un objeto de host es un objeto que no forma parte de la implementación de ECMAScript con la que está trabajando, pero que el host lo proporciona como una extensión. El DOM es un ejemplo común de objetos host, aunque en la mayoría de las implementaciones más recientes los objetos DOM heredan del Object nativo y tienen nombres de clase internos (como HTMLElement , Window , etc.). ActiveXObject, propiedad de IE, es otro ejemplo de objeto host.

[object] se ve más comúnmente al alertar a los objetos DOM en Internet Explorer 7 y versiones anteriores, ya que son objetos de host que no tienen un nombre de clase interno.

ii) que tipo de objeto es este

Puede obtener el "tipo" (clase interna) de objeto usando Object.prototype.toString. La especificación requiere que siempre devuelva una cadena en el formato [object [[Class]]], donde [[Class]]está el nombre de la clase interna como Object , Array , Date , RegExp , etc. Puede aplicar este método a cualquier objeto (incluidos los objetos host), usando

Object.prototype.toString.apply(obj);

Muchas isArrayimplementaciones usan esta técnica para descubrir si un objeto es realmente una matriz (aunque no es tan robusto en IE como en otros navegadores ).

iii) qué propiedades contiene este objeto y valores de cada propiedad

En ECMAScript 3, puede iterar sobre propiedades enumerables mediante un for...inbucle. Tenga en cuenta que la mayoría de las propiedades integradas no son enumerables. Lo mismo ocurre con algunos objetos host. En ECMAScript 5, puede obtener una matriz que contenga los nombres de todas las propiedades no heredadas utilizando Object.getOwnPropertyNames(obj). Esta matriz contendrá nombres de propiedad enumerables y no enumerables.

Espero que esto no cuente como spam. Humildemente terminé escribiendo una función después de interminables sesiones de depuración: http://github.com/halilim/Javascript-Simple-Object-Inspect

function simpleObjInspect(oObj, key, tabLvl)
{
    key = key || "";
    tabLvl = tabLvl || 1;
    var tabs = "";
    for(var i = 1; i < tabLvl; i++){
        tabs += "\t";
    }
    var keyTypeStr = " (" + typeof key + ")";
    if (tabLvl == 1) {
        keyTypeStr = "(self)";
    }
    var s = tabs + key + keyTypeStr + " : ";
    if (typeof oObj == "object" && oObj !== null) {
        s += typeof oObj + "\n";
        for (var k in oObj) {
            if (oObj.hasOwnProperty(k)) {
                s += simpleObjInspect(oObj[k], k, tabLvl + 1);
            }
        }
    } else {
        s += "" + oObj + " (" + typeof oObj + ") \n";
    }
    return s;
}

Uso

alert(simpleObjInspect(anyObject));

o

console.log(simpleObjInspect(anyObject));

Obtén FireBug para Mozilla Firefox.

utilizar console.log(obj);

Spotlight.js es una gran biblioteca para iterar sobre el objeto de la ventana y otros objetos del host en busca de ciertas cosas.

// find all "length" properties
spotlight.byName('length');

// or find all "map" properties on jQuery
spotlight.byName('map', { 'object': jQuery, 'path': '$' });

// or all properties with `RegExp` values
spotlight.byKind('RegExp');

// or all properties containing "oo" in their name
spotlight.custom(function(value, key) { return key.indexOf('oo') > -1; });

Te gustará por esto.

Objeto de escaneo para la primera entrada de un accesorio determinado:

var obj = {a:'Saludos',
            b:{b_1:{b_1_1:'Como estas?',b_1_2:'Un gusto conocerte'}},
           d:'Hasta luego'
            }
function scan (element,list){
    var res;
    if (typeof(list) != 'undefined'){
        if (typeof(list) == 'object'){
            for(key in list){
               if (typeof(res) == 'undefined'){
                res = (key == element)?list[key]:scan(element,list[key]);
               }
            });
        }
    }
    return res;
}
console.log(scan('a',obj));