Bagaimana cara mendapatkan properti objek di JavaScript / jQuery?

Dalam JavaScript / jQuery, jika saya memiliki alertbeberapa objek, saya mendapatkan salah satu [object]atau [object Object]

Apakah ada cara untuk mengetahui:

1. apa perbedaan antara kedua benda ini

2. Jenis Objek apa ini

3. apa semua properti yang berisi objek ini dan nilai dari setiap properti

?

Anda dapat mencari kunci dan nilai objek dengan menjalankan for inloop asli JavaScript :

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

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

atau menggunakan .each()metode jQuery :

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

Dengan pengecualian enam tipe primitif , semua yang ada di ECMA- / JavaScript adalah sebuah objek. Array; fungsi; semuanya adalah obyek. Bahkan kebanyakan primitif itu sebenarnya juga objek dengan pilihan metode yang terbatas. Mereka dilemparkan ke objek di bawah kap, jika diperlukan. Untuk mengetahui nama kelas dasar, Anda dapat memanggil Object.prototype.toStringmetode pada objek, seperti ini:

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

Di atas akan ditampilkan [object Array].

Ada beberapa nama kelas lainnya, seperti [object Object], [object Function], [object Date], [object String], [object Number], [object Array], dan [object Regex].

Untuk mendapatkan daftar properti / nilai objek:

1. Di Firefox - Firebug:

   console.dir(<object>);

2. JS standar untuk mendapatkan kunci objek yang dipinjam dari 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");
      }

Editan:

1. <object> di atas akan diganti dengan referensi variabel ke objek.
2. console.log() digunakan di konsol, jika Anda tidak yakin apa itu, Anda dapat menggantinya dengan alert()

i) apa perbedaan antara kedua objek ini

Jawaban sederhananya adalah yang [object]menunjukkan objek host yang tidak memiliki kelas internal. Objek host adalah objek yang bukan bagian dari implementasi ECMAScript yang Anda kerjakan, tetapi disediakan oleh host sebagai ekstensi. DOM adalah contoh umum dari objek host, meskipun dalam implementasi yang paling baru objek DOM mewarisi dari Objek asli dan memiliki nama kelas internal (seperti HTMLElement , Window , dll). ActiveXObject milik IE adalah contoh lain dari objek host.

[object] paling sering terlihat saat memberi tahu objek DOM di Internet Explorer 7 dan yang lebih rendah, karena mereka adalah objek host yang tidak memiliki nama kelas internal.

ii) Jenis Objek apa ini

Anda bisa mendapatkan "tipe" (kelas internal) objek menggunakan Object.prototype.toString. Spesifikasi mengharuskannya selalu mengembalikan string dalam format [object [[Class]]], di mana [[Class]]nama kelas internal seperti Object , Array , Date , RegExp , dll. Anda dapat menerapkan metode ini ke objek apa pun (termasuk objek host), menggunakan

Object.prototype.toString.apply(obj);

Banyak isArrayimplementasi menggunakan teknik ini untuk menemukan apakah suatu objek sebenarnya adalah sebuah array (meskipun tidak sekuat di IE seperti di browser lain ).

iii) apa semua properti yang dikandung objek ini dan nilai dari setiap properti

Dalam ECMAScript 3, Anda dapat melakukan iterasi pada properti yang dapat dihitung menggunakan for...inloop. Perhatikan bahwa sebagian besar properti bawaan tidak dapat dihitung. Hal yang sama berlaku untuk beberapa objek host. Di ECMAScript 5, Anda bisa mendapatkan array yang berisi nama semua properti yang tidak diwarisi menggunakan Object.getOwnPropertyNames(obj). Array ini akan berisi nama properti non-enumerable dan enumerable.

Saya harap ini tidak dihitung sebagai spam. Saya dengan rendah hati akhirnya menulis fungsi setelah sesi debug tanpa akhir: 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;
}

Pemakaian

alert(simpleObjInspect(anyObject));

atau

console.log(simpleObjInspect(anyObject));

Dapatkan FireBug untuk Mozilla Firefox.

menggunakan console.log(obj);

Spotlight.js adalah pustaka yang bagus untuk melakukan iterasi pada objek jendela dan objek host lainnya untuk mencari hal-hal tertentu.

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

Anda akan menyukainya untuk ini.

Memindai objek untuk intance pertama dari prop yang ditentukan:

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