วิธีรับคุณสมบัติของวัตถุใน JavaScript / jQuery

ใน JavaScript / jQuery ถ้าฉันalertมีวัตถุฉันจะได้รับ[object]หรือ [object Object]

มีวิธีใดบ้างที่จะทราบ:

1. อะไรคือความแตกต่างระหว่างวัตถุทั้งสองนี้

2. วัตถุประเภทนี้คืออะไร

3. คุณสมบัติทั้งหมดที่อ็อบเจ็กต์นี้มีและค่าของคุณสมบัติแต่ละอย่าง

เหรอ?

คุณสามารถค้นหาคีย์และค่าของออบเจ็กต์ได้โดยเรียกใช้เนทีฟfor inลูปของ JavaScript :

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

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

หรือใช้.each()วิธีของ jQuery :

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

ด้วยข้อยกเว้นของหกชนิดดั้งเดิม , ทุกอย่างใน ECMA- / JavaScript เป็นวัตถุ อาร์เรย์; ฟังก์ชั่น; ทุกอย่างเป็นวัตถุ แม้แต่วัตถุดั้งเดิมเหล่านั้นส่วนใหญ่ก็ยังเป็นวัตถุที่มีวิธีการเลือกที่ จำกัด พวกเขาจะโยนลงในวัตถุใต้ประทุนเมื่อจำเป็น หากต้องการทราบชื่อคลาสพื้นฐานคุณอาจเรียกใช้Object.prototype.toStringเมธอดบนอ็อบเจ็กต์เช่นนี้:

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

[object Array]เอาท์พุทประสงค์ดังกล่าวข้างต้น

มีหลายชื่อชั้นอื่น ๆ เช่น[object Object], [object Function], [object Date], [object String], [object Number], และ[object Array][object Regex]

ในการรับรายการคุณสมบัติ / ค่าของวัตถุ:

1. ใน Firefox - Firebug:

   console.dir(<object>);
   

2. Standard JS เพื่อรับคีย์ออบเจ็กต์ที่ยืมมาจาก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");
      }
   

การแก้ไข:

1. <object> ในข้างต้นจะถูกแทนที่ด้วยการอ้างอิงตัวแปรไปยังวัตถุ
2. console.log() จะใช้ในคอนโซลหากคุณไม่แน่ใจว่าคืออะไรคุณสามารถแทนที่ด้วยไฟล์ alert()

i) อะไรคือความแตกต่างระหว่างวัตถุทั้งสองนี้

คำตอบง่ายๆคือ[object]บ่งชี้วัตถุโฮสต์ที่ไม่มีคลาสภายใน อ็อบเจ็กต์โฮสต์คืออ็อบเจ็กต์ที่ไม่ได้เป็นส่วนหนึ่งของการใช้ ECMAScript ที่คุณกำลังทำงานอยู่ แต่โฮสต์เป็นส่วนขยาย DOM เป็นตัวอย่างทั่วไปของโฮสต์อ็อบเจ็กต์แม้ว่าในการนำไปใช้งานที่ใหม่กว่าอ็อบเจ็กต์ DOM จะสืบทอดมาจากอ็อบเจ็กต์ดั้งเดิมและมีชื่อคลาสภายใน (เช่นHTMLElement , Windowเป็นต้น) ActiveXObject ที่เป็นกรรมสิทธิ์ของ IE เป็นอีกตัวอย่างหนึ่งของวัตถุโฮสต์

[object] มักจะพบเห็นได้บ่อยที่สุดเมื่อแจ้งเตือนอ็อบเจ็กต์ DOM ใน Internet Explorer 7 และต่ำกว่าเนื่องจากเป็นอ็อบเจ็กต์โฮสต์ที่ไม่มีชื่อคลาสภายใน

ii) วัตถุประเภทนี้คืออะไร

คุณจะได้รับ "ประเภท" (ชั้นภายใน) Object.prototype.toStringของวัตถุโดยใช้ ข้อกำหนดกำหนดให้ส่งคืนสตริงในรูปแบบเสมอชื่อคลาสภายในอยู่[object [[Class]]]ที่ไหน[[Class]]เช่นObject , Array , Date , RegExpเป็นต้นคุณสามารถใช้วิธีนี้กับอ็อบเจ็กต์ใดก็ได้ (รวมถึงโฮสต์อ็อบเจ็กต์) โดยใช้

Object.prototype.toString.apply(obj);

isArrayการใช้งานจำนวนมากใช้เทคนิคนี้เพื่อค้นหาว่าออบเจ็กต์นั้นเป็นอาร์เรย์จริงหรือไม่ (แม้ว่าจะไม่แข็งแกร่งเท่าใน IE เหมือนในเบราว์เซอร์อื่นก็ตาม)

iii) คุณสมบัติทั้งหมดที่อ็อบเจ็กต์นี้มีและค่าของคุณสมบัติแต่ละอย่าง

ใน ECMAScript 3 คุณสามารถทำซ้ำคุณสมบัติที่แจกแจงได้โดยใช้การfor...inวนซ้ำ โปรดทราบว่าคุณสมบัติในตัวส่วนใหญ่ไม่สามารถนับได้ เช่นเดียวกับวัตถุโฮสต์บางอย่าง ใน ECMAScript 5 คุณสามารถรับอาร์เรย์ที่มีชื่อของคุณสมบัติที่ไม่สืบทอดทั้งหมดโดยใช้Object.getOwnPropertyNames(obj). อาร์เรย์นี้จะมีชื่อคุณสมบัติที่ไม่สามารถระบุได้และสามารถระบุได้

ฉันหวังว่านี่จะไม่นับว่าเป็นสแปม ฉันลงเอยด้วยการเขียนฟังก์ชั่นหลังจากเซสชันดีบักไม่รู้จบ: 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;
}

การใช้งาน

alert(simpleObjInspect(anyObject));

หรือ

console.log(simpleObjInspect(anyObject));

รับFireBugสำหรับ Mozilla Firefox

ใช้ console.log(obj);

Spotlight.jsเป็นไลบรารีที่ยอดเยี่ยมสำหรับการทำซ้ำบนวัตถุหน้าต่างและวัตถุโฮสต์อื่น ๆ ที่กำลังมองหาบางสิ่ง

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

คุณจะชอบสำหรับสิ่งนี้

การสแกนวัตถุเพื่อหาเจตนาแรกของเสาที่กำหนด:

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