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

Dans JavaScript / jQuery, si j'ai alertun objet, j'obtiens soit [object]ou [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. ce que contient toutes les propriétés cet objet et les valeurs de chaque propriété

?

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

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

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

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

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

À l'exception de six types primitifs , tout dans ECMA- / JavaScript est un objet. Tableaux; les fonctions; tout est un objet. Même la plupart de ces primitives sont en fait également des objets avec une sélection limitée de méthodes. Ils sont coulés dans des objets sous le capot, si nécessaire. Pour connaître le nom de la classe de base, vous pouvez appeler la Object.prototype.toStringméthode sur un objet, comme ceci:

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

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

Il y a plusieurs autres noms de classe, comme [object Object], [object Function], [object Date], [object String], [object Number], [object Array]et [object Regex].

Pour obtenir la liste des propriétés / valeurs des objets:

1. Dans Firefox - Firebug:

   console.dir(<object>);

2. JS standard pour obtenir des clés d'objet empruntées à 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");
      }

Modifications:

1. <object> dans ce qui précède doit être remplacé par la référence de variable à l'objet.
2. 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()

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

La réponse simple est que cela [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 implémentations plus récentes, les objets DOM héritent de l'Object natif et ont des noms de classes internes (tels que HTMLElement , Window , etc.). ActiveXObject propriétaire d'IE est un autre exemple d'objet hôte.

[object] est le plus souvent observé lors de l'alerte d'objets DOM dans Internet Explorer 7 et versions antérieures, 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 au format [object [[Class]]], où [[Class]]est le nom de classe interne tel que Object , Array , Date , RegExp , etc. Vous pouvez appliquer cette méthode à n'importe quel objet (y compris les objets hôtes), en utilisant

Object.prototype.toString.apply(obj);

De nombreuses isArrayimplémentations utilisent cette technique pour découvrir si un objet est en fait un tableau (bien qu'il ne soit pas aussi robuste dans IE que dans d'autres navigateurs ).

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

Dans ECMAScript 3, vous pouvez parcourir des propriétés énumérables à l'aide d'une for...inboucle. Notez que la plupart des propriétés intégrées ne sont pas énumérables. La même chose est vraie pour certains objets hôtes. Dans 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.

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

Usage

alert(simpleObjInspect(anyObject));

ou

console.log(simpleObjInspect(anyObject));

Obtenez FireBug pour Mozilla Firefox.

utilisation console.log(obj);

Spotlight.js est une excellente bibliothèque pour parcourir l'objet window et d'autres objets hôtes à la recherche de certaines choses.

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

Vous l'aimerez pour cela.

Analyse de l'objet pour la première entrée d'un accessoire déterminé:

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