Como obter as propriedades de um objeto em JavaScript / jQuery?

Em JavaScript / jQuery, se eu alertalgum objeto, recebo [object]ou [object Object]

Existe alguma maneira de saber:

1. qual é a diferença entre esses dois objetos

2. que tipo de objeto é este

3. o que todas as propriedades que este objeto contém e os valores de cada propriedade

?

Você pode pesquisar as chaves e os valores de um objeto invocando o for inloop nativo do JavaScript :

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

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

ou usando o .each()método jQuery :

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

Com exceção de seis tipos primitivos , tudo em ECMA- / JavaScript é um objeto. Arrays; funções; tudo é um objeto. Mesmo a maioria desses primitivos também são objetos com uma seleção limitada de métodos. Eles são lançados em objetos sob o capô, quando necessário. Para saber o nome da classe base, você pode invocar o Object.prototype.toStringmétodo em um objeto, assim:

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

O acima será gerado [object Array].

Existem vários outros nomes de classe, como [object Object], [object Function], [object Date], [object String], [object Number], [object Array], e [object Regex].

Para obter a lista de propriedades / valores do objeto:

1. No Firefox - Firebug:

   console.dir(<object>);

2. JS padrão para obter chaves de objeto emprestadas 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");
      }

Editar% s:

1. <object> acima deve ser substituído pela referência de variável ao objeto.
2. console.log() deve ser usado no console, se você não tiver certeza do que é, você pode substituí-lo por um alert()

i) qual é a diferença entre esses dois objetos

A resposta simples é que [object]indica um objeto host que não possui uma classe interna. Um objeto de host é um objeto que não faz parte da implementação ECMAScript com a qual você está trabalhando, mas é fornecido pelo host como uma extensão. O DOM é um exemplo comum de objetos de host, embora na maioria das implementações mais recentes os objetos DOM sejam herdados do objeto nativo e tenham nomes de classe internos (como HTMLElement , Window , etc). O ActiveXObject proprietário do IE é outro exemplo de um objeto host.

[object] é mais comumente visto ao alertar objetos DOM no Internet Explorer 7 e inferior, uma vez que são objetos de host que não têm nome de classe interno.

ii) que tipo de objeto é este

Você pode obter o "tipo" (classe interna) de objeto usando Object.prototype.toString. A especificação exige que sempre retorne uma string no formato [object [[Class]]], onde [[Class]]é o nome da classe interna, como Object , Array , Date , RegExp , etc. Você pode aplicar este método a qualquer objeto (incluindo objetos de host), usando

Object.prototype.toString.apply(obj);

Muitas isArrayimplementações usam essa técnica para descobrir se um objeto é realmente um array (embora não seja tão robusto no IE quanto em outros navegadores ).

iii) o que todas as propriedades que este objeto contém e os valores de cada propriedade

No ECMAScript 3, você pode iterar sobre propriedades enumeráveis ​​usando um for...inloop. Observe que a maioria das propriedades integradas não são enumeráveis. O mesmo é verdade para alguns objetos hospedeiros. No ECMAScript 5, você pode obter uma matriz contendo os nomes de todas as propriedades não herdadas usando Object.getOwnPropertyNames(obj). Esta matriz conterá nomes de propriedade não enumeráveis ​​e enumeráveis.

Espero que isso não conte como spam. Humildemente acabei escrevendo uma função após intermináveis ​​sessões de depuração: 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));

ou

console.log(simpleObjInspect(anyObject));

Obtenha o FireBug para Mozilla Firefox.

usar console.log(obj);

Spotlight.js é uma ótima biblioteca para iteração sobre o objeto janela e outros objetos host procurando por certas coisas.

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

Você vai gostar por isso.

Escaneando o objeto para a primeira instância de um objeto 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));