Jak uzyskać właściwości obiektu w JavaScript / jQuery?

W JavaScript / jQuery, jeśli mam alertjakiś obiekt, otrzymuję albo [object]albo [object Object]

Czy jest jakiś sposób, aby dowiedzieć się:

1. jaka jest różnica między tymi dwoma obiektami

2. jaki to rodzaj obiektu

3. jakie właściwości zawiera ten obiekt i jakie są wartości każdej właściwości

?

Możesz wyszukać klucze i wartości obiektu, wywołując natywną for inpętlę JavaScript :

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

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

lub używając .each()metody jQuery :

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

Z wyjątkiem sześciu typów pierwotnych , wszystko w ECMA- / JavaScript jest obiektem. Tablice; Funkcje; wszystko jest przedmiotem. Nawet większość tych prymitywów to w rzeczywistości także obiekty z ograniczonym wyborem metod. W razie potrzeby wrzucane są do przedmiotów pod maską. Aby poznać nazwę klasy bazowej, możesz wywołać Object.prototype.toStringmetodę na obiekcie, na przykład:

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

Powyższe wyjdzie [object Array].

Istnieje kilka innych nazw klas, jak [object Object], [object Function], [object Date], [object String], [object Number], [object Array], i [object Regex].

Aby uzyskać listę właściwości / wartości obiektu:

1. W przeglądarce Firefox - Firebug:

   console.dir(<object>);

2. Standardowy JS do pobierania kluczy obiektów pożyczonych od 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");
      }

Edycje:

1. <object> w powyższym ma zostać zastąpione zmiennym odniesieniem do obiektu.
2. console.log() ma być używany w konsoli, jeśli nie masz pewności, co to jest, możesz zastąpić go rozszerzeniem alert()

i) jaka jest różnica między tymi dwoma obiektami

Prosta odpowiedź brzmi: [object]wskazuje obiekt hosta, który nie ma klasy wewnętrznej. Obiekt hosta to obiekt, który nie jest częścią implementacji ECMAScript, z którą pracujesz, ale jest dostarczany przez hosta jako rozszerzenie. DOM jest typowym przykładem obiektów hosta, chociaż w większości nowszych implementacji obiekty DOM dziedziczą po natywnym Object i mają wewnętrzne nazwy klas (takie jak HTMLElement , Window itp.). Innym przykładem obiektu hosta jest zastrzeżony obiekt ActiveXObject w IE.

[object] jest najczęściej spotykane podczas ostrzegania obiektów DOM w programie Internet Explorer 7 i starszych, ponieważ są to obiekty hosta, które nie mają wewnętrznej nazwy klasy.

ii) jaki to rodzaj Obiektu

Możesz uzyskać "typ" (klasę wewnętrzną) obiektu używając Object.prototype.toString. Specyfikacja wymaga, aby zawsze zwracała ciąg w formacie [object [[Class]]], gdzie [[Class]]jest wewnętrzna nazwa klasy, taka jak Object , Array , Date , RegExp itp. Możesz zastosować tę metodę do dowolnego obiektu (w tym obiektów hosta), używając

Object.prototype.toString.apply(obj);

Wiele isArrayimplementacji używa tej techniki, aby odkryć, czy obiekt jest w rzeczywistości tablicą (chociaż w IE nie jest tak solidna, jak w innych przeglądarkach ).

iii) jakie właściwości zawiera ten obiekt i jakie są wartości każdej właściwości

W ECMAScript 3 można iterować po wyliczalnych właściwościach za pomocą for...inpętli. Zwróć uwagę, że większości wbudowanych właściwości nie można wyliczyć. To samo dotyczy niektórych obiektów hosta. W ECMAScript 5 można uzyskać tablicę zawierającą nazwy wszystkich niedziedziczonych właściwości za pomocą Object.getOwnPropertyNames(obj). Ta tablica będzie zawierać nie wyliczalne i wyliczalne nazwy właściwości.

Mam nadzieję, że to nie jest spamem. Z pokorą napisałem funkcję po niekończących się sesjach debugowania: 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;
}

Stosowanie

alert(simpleObjInspect(anyObject));

lub

console.log(simpleObjInspect(anyObject));

Pobierz FireBug dla Mozilla Firefox.

posługiwać się console.log(obj);

Spotlight.js to świetna biblioteka do iterowania po obiekcie okna i innych obiektach hosta w poszukiwaniu określonych rzeczy.

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

Spodoba ci się za to.

Skanowanie obiektu do pierwszego wejścia określonego rekwizytu:

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