Come ottenere le proprietà di un oggetto in JavaScript / jQuery?

In JavaScript / jQuery, se ho alertqualche oggetto, ottengo o [object]o [object Object]

C'è un modo per sapere:

1. qual è la differenza tra questi due oggetti

2. che tipo di oggetto è questo

3. cosa contiene tutte le proprietà questo oggetto e i valori di ciascuna proprietà

?

Puoi cercare le chiavi e i valori di un oggetto invocando il for inciclo nativo di JavaScript :

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

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

o utilizzando il .each()metodo di jQuery :

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

Con l'eccezione di sei tipi primitivi , tutto in ECMA- / JavaScript è un oggetto. Array; funzioni; tutto è un oggetto. Anche la maggior parte di queste primitive sono in realtà anche oggetti con una selezione limitata di metodi. Sono gettati in oggetti sotto il cofano, quando richiesto. Per conoscere il nome della classe base, puoi invocare il Object.prototype.toStringmetodo su un oggetto, in questo modo:

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

Quanto sopra verrà prodotto [object Array].

Ci sono diversi altri nomi di classi, come [object Object], [object Function], [object Date], [object String], [object Number], [object Array], e [object Regex].

Per ottenere un elenco di proprietà / valori degli oggetti:

1. In Firefox - Firebug:

   console.dir(<object>);

2. JS standard per ottenere chiavi oggetto prese in prestito da 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");
      }

Modifiche:

1. <object> in quanto sopra va sostituito con il riferimento variabile all'oggetto.
2. console.log() deve essere utilizzato nella console, se non sei sicuro di cosa sia, puoi sostituirlo con un file alert()

i) qual è la differenza tra questi due oggetti

La semplice risposta è che [object]indica un oggetto host che non ha una classe interna. Un oggetto host è un oggetto che non fa parte dell'implementazione ECMAScript con cui stai lavorando, ma è fornito dall'host come estensione. Il DOM è un esempio comune di oggetti host, sebbene nella maggior parte delle implementazioni più recenti gli oggetti DOM ereditino dall'oggetto nativo e abbiano nomi di classi interne (come HTMLElement , Window , ecc.). ActiveXObject proprietario di IE è un altro esempio di oggetto host.

[object] è più comunemente visto quando si avvisano gli oggetti DOM in Internet Explorer 7 e versioni precedenti, poiché sono oggetti host che non hanno un nome di classe interno.

ii) che tipo di oggetto è questo

Puoi ottenere il "tipo" (classe interna) dell'oggetto usando Object.prototype.toString. La specifica richiede che restituisca sempre una stringa nel formato [object [[Class]]], dove [[Class]]è il nome della classe interna come Object , Array , Date , RegExp , ecc. È possibile applicare questo metodo a qualsiasi oggetto (inclusi gli oggetti host), utilizzando

Object.prototype.toString.apply(obj);

Molte isArrayimplementazioni utilizzano questa tecnica per scoprire se un oggetto è effettivamente un array (sebbene non sia così robusto in IE come in altri browser ).

iii) cosa contiene tutte le proprietà questo oggetto e i valori di ciascuna proprietà

In ECMAScript 3, puoi iterare su proprietà enumerabili utilizzando un for...inciclo. Notare che la maggior parte delle proprietà integrate non sono enumerabili. Lo stesso vale per alcuni oggetti host. In ECMAScript 5, puoi ottenere un array contenente i nomi di tutte le proprietà non ereditate utilizzando Object.getOwnPropertyNames(obj). Questo array conterrà nomi di proprietà non enumerabili ed enumerabili.

Spero che questo non venga considerato spam. Ho umilmente finito per scrivere una funzione dopo infinite sessioni di debug: 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;
}

Utilizzo

alert(simpleObjInspect(anyObject));

o

console.log(simpleObjInspect(anyObject));

Ottieni FireBug per Mozilla Firefox.

uso console.log(obj);

Spotlight.js è un'ottima libreria per l'iterazione sull'oggetto finestra e altri oggetti host alla ricerca di determinate cose.

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

Ti piacerà per questo.

Scansione dell'oggetto per la prima intenzione di un oggetto di scena determinato:

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