Comment obtenir les propriétés d'un objet en JavaScript / jQuery?

Question

En JavaScript / jQuery, si j'alert un objet, je reçois soit [object] soit [object Object]

Y a-t-il un moyen de savoir:

1. quelle est la différence entre ces deux objets

2. quel type d'objet est-ce

3. quelles sont toutes les propriétés de cet objet et les valeurs de chaque propriété

?

Answer 1

Vous pouvez rechercher les clés et les valeurs d'un objet en invoquant soit la boucle native for in de JavaScript :

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

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

ou en utilisant la méthode .each() de jQuery :

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

À l'exception de six types primitifs, tout en ECMA-/JavaScript est un objet. Les tableaux; les fonctions; tout est un objet. Même la plupart de ces primitives sont en réalité aussi des objets avec une sélection limitée de méthodes. Ils sont convertis en objets en interne, lorsque nécessaire. Pour connaître le nom de la classe de base, vous pouvez invoquer la méthode Object.prototype.toString sur un objet, comme ceci :

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

Ce qui précède affichera [object Array].

Il existe plusieurs autres noms de classes, tels que [object Object], [object Function], [object Date], [object String], [object Number], [object Array], et [object Regex].

Answer 2

Pour obtenir la liste des propriétés / valeurs de l'objet:

1. Dans Firefox - Firebug:

   console.dir();
   
   JS standard pour obtenir les clés de l'objet emprunté à Slashnick:
   
      var fGetKeys = function(obj){
         var keys = [];
         for(var key in obj){
            keys.push(key);
         }
         return keys;
      }
   
   // Exemple pour l'appeler:
   
      var arrKeys = fGetKeys(document);
   
      for (var i=0, n=arrKeys.length; i
   
   Modifications:
   
    dans le code ci-dessus doit être remplacé par la référence variable de l'objet.
   console.log() doit être utilisé dans la console, si vous n'êtes pas sûr de ce que c'est, vous pouvez le remplacer par un alert()

Answer 3

i) quelle est la différence entre ces deux objets

La réponse simple est que [object] indique un objet hôte qui n'a pas de classe interne. Un objet hôte est un objet qui ne fait pas partie de l'implémentation ECMAScript avec laquelle vous travaillez, mais qui est fourni par l'hôte en tant qu'extension. Le DOM est un exemple courant d'objets hôtes, bien que dans la plupart des nouvelles implémentations, les objets DOM héritent de l'objet natif et ont des noms de classe internes (tels que HTMLElement, Window, etc). L'objet hôte ActiveXObject propriétaire d'IE est un autre exemple d'objet hôte.

[object] est le plus souvent vu lors de l'alerte des objets DOM dans Internet Explorer 7 et inférieur, car ce sont des objets hôtes qui n'ont pas de nom de classe interne.

ii) quel type d'objet est-ce

Vous pouvez obtenir le "type" (classe interne) de l'objet en utilisant Object.prototype.toString. La spécification exige qu'elle renvoie toujours une chaîne dans le format [object [[Class]]], où [[Class]] est le nom de la classe interne comme Object, Array, Date, RegExp, etc. Vous pouvez appliquer cette méthode à n'importe quel objet (y compris des objets hôtes), en utilisant

Object.prototype.toString.apply(obj);

De nombreuses implémentations de isArray utilisent cette technique pour découvrir si un objet est réellement un tableau (bien que ce ne soit pas aussi robuste dans IE que dans d'autres navigateurs).

iii) quelles sont toutes les propriétés que cet objet contient et les valeurs de chaque propriété

En ECMAScript 3, vous pouvez itérer sur les propriétés énumérables en utilisant une boucle for...in. Notez que la plupart des propriétés intégrées ne sont pas énumérables. Il en va de même pour certains objets hôtes. En ECMAScript 5, vous pouvez obtenir un tableau contenant les noms de toutes les propriétés non héritées en utilisant Object.getOwnPropertyNames(obj). Ce tableau contiendra des noms de propriétés non énumérables et énumérables.

Answer 4

J'espère que cela ne compte pas comme du spam. J'ai humblement fini par écrire une fonction après d'innombrables sessions de débogage : 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;
}

Utilisation

alert(simpleObjInspect(anyObject));

ou

console.log(simpleObjInspect(anyObject));

Answer 5

Obtenez FireBug pour Mozilla Firefox.

utilisez console.log(obj);