Wie erhalte ich die Eigenschaften eines Objekts in JavaScript / jQuery?

Wenn ich in JavaScript / jQuery alertein Objekt habe, erhalte ich entweder [object]oder [object Object]

Gibt es eine Möglichkeit zu wissen:

1. Was ist der Unterschied zwischen diesen beiden Objekten

2. Was für ein Objekt ist das?

3. Was alle Eigenschaften dieses Objekt enthält und Werte jeder Eigenschaft

?

Sie können die Schlüssel und Werte eines Objekts nachschlagen, indem Sie entweder die native JavaScript- for inSchleife aufrufen :

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

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

oder mit der .each()Methode von jQuery :

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

Mit Ausnahme von sechs primitiven Typen ist alles in ECMA- / JavaScript ein Objekt. Arrays; Funktionen; Alles ist ein Objekt. Selbst die meisten dieser Grundelemente sind tatsächlich auch Objekte mit einer begrenzten Auswahl an Methoden. Sie werden bei Bedarf in Gegenstände unter der Haube gegossen. Um den Namen der Basisklasse zu ermitteln, können Sie die Object.prototype.toStringMethode für ein Objekt wie folgt aufrufen :

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

Das Obige wird ausgegeben [object Array].

Es gibt mehrere andere Klassennamen, wie [object Object], [object Function], [object Date], [object String], [object Number], [object Array], und [object Regex].

So erhalten Sie eine Liste der Objekteigenschaften / -werte:

1. In Firefox - Firebug:

   console.dir(<object>);

2. Standard-JS zum Abrufen von Objektschlüsseln von 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");
      }

Bearbeitungen:

1. <object> oben ist durch die variable Referenz auf das Objekt zu ersetzen.
2. console.log() Wenn Sie sich nicht sicher sind, was das ist, können Sie es durch eine ersetzen alert()

i) Was ist der Unterschied zwischen diesen beiden Objekten?

Die einfache Antwort gibt an, dass [object]ein Hostobjekt keine interne Klasse hat. Ein Host-Objekt ist ein Objekt, das nicht Teil der ECMAScript-Implementierung ist, mit der Sie arbeiten, sondern vom Host als Erweiterung bereitgestellt wird. Das DOM ist ein häufiges Beispiel für Hostobjekte , obwohl in den meisten neueren Implementierungen DOM-Objekte vom nativen Objekt erben und interne Klassennamen haben (z. B. HTMLElement , Window usw.). Das proprietäre ActiveXObject von IE ist ein weiteres Beispiel für ein Hostobjekt.

[object] wird am häufigsten beim Warnen von DOM-Objekten in Internet Explorer 7 und niedriger angezeigt, da es sich um Hostobjekte handelt, die keinen internen Klassennamen haben.

ii) um welche Art von Objekt handelt es sich?

Sie können den "Typ" (interne Klasse) des Objekts mit abrufen Object.prototype.toString. Die Spezifikation erfordert, dass immer eine Zeichenfolge im Format zurückgegeben wird [object [[Class]]], wobei [[Class]]der interne Klassenname wie Objekt , Array , Datum , RegExp usw. angegeben ist. Sie können diese Methode mit jedem Objekt (einschließlich Hostobjekten) anwenden

Object.prototype.toString.apply(obj);

Viele isArrayImplementierungen verwenden diese Technik, um festzustellen, ob ein Objekt tatsächlich ein Array ist (obwohl es im IE nicht so robust ist wie in anderen Browsern ).

iii) welche Eigenschaften dieses Objekt enthält und welche Werte jede Eigenschaft hat

In ECMAScript 3 können Sie mithilfe einer for...inSchleife über aufzählbare Eigenschaften iterieren . Beachten Sie, dass die meisten integrierten Eigenschaften nicht aufzählbar sind. Gleiches gilt für einige Hostobjekte. In ECMAScript 5 können Sie mithilfe von ein Array abrufen, das die Namen aller nicht vererbten Eigenschaften enthält Object.getOwnPropertyNames(obj). Dieses Array enthält nicht aufzählbare und aufzählbare Eigenschaftsnamen.

Ich hoffe, das zählt nicht als Spam. Nach endlosen Debug-Sitzungen schrieb ich demütig eine Funktion: 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;
}

Verwendung

alert(simpleObjInspect(anyObject));

oder

console.log(simpleObjInspect(anyObject));

Holen Sie sich FireBug für Mozilla Firefox.

verwenden console.log(obj);

Spotlight.js ist eine großartige Bibliothek zum Durchlaufen des Fensterobjekts und anderer Hostobjekte, die nach bestimmten Dingen suchen.

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

Das wird dir gefallen.

Scannen eines Objekts auf die erste Absicht einer bestimmten Requisite:

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