जावास्क्रिप्ट / jQuery में किसी वस्तु के गुण कैसे प्राप्त करें?


97

जावास्क्रिप्ट / jQuery में, अगर मुझे alertकोई वस्तु मिलती है, तो मैं [object]या तो मिलता हूं या [object Object]

क्या यह जानने का कोई तरीका है:

  1. इन दोनों वस्तुओं में क्या अंतर है

  2. यह किस प्रकार की वस्तु है

  3. इस गुण में सभी गुण क्या हैं और प्रत्येक गुण के मान हैं

?


मैं एक जावास्क्रिप्ट वस्तु मुद्रित कर सकते हैं! stackoverflow.com/questions/957537/…
राशी

मुझे एक सहायक दस्तावेज भी मिला docs.jquery.com/Types
Saiful

जवाबों:


141

आप जावास्क्रिप्ट के देशी for inलूप को लागू करके किसी ऑब्जेक्ट की कुंजी और मान देख सकते हैं :

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

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

या jQuery की .each()विधि का उपयोग कर :

$.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]


31
"सब कुछ एक वस्तु है", यह सच नहीं है, और यह भाषा की बड़ी भ्रांतियों में से एक है। वहाँ हम क्या कहते हैं आदिम प्रकार: संख्या, स्ट्रिंग, बूलियन, अपरिभाषित और अशक्त। उन्हें अक्सर आदिम आवरणों के साथ भ्रमित किया जा सकता है, अंतर्निहित बिल्डरों के साथ बनाई गई वस्तुएं, उदाहरण के लिए: typeof new String("foo");"ऑब्जेक्ट" का उत्पादन करता है, यह एक लिपटे आदिम मूल्य है, जबकि typeof "foo";"स्ट्रिंग" का उत्पादन करता है। यह भी देखें
सीएमएस

मैं सीएमएस से सहमत हूं और एक बार जब आप एक आदिम स्ट्रिंग और स्ट्रिंग ऑब्जेक्ट के बीच अंतर करते हैं, तो आपको अपनी क्षमताओं का एहसास होगा ~ विशेष रूप से कोड को कम करने की कोशिश करते समय।
vol7ron

7
@ सीएमएस यह बिल्कुल सच नहीं है। "आदिम" स्ट्रिंग है अपने आप में एक वस्तु; यह सिर्फ तरीकों का एक अलग चयन है। इसी तरह संख्या और बूलियन के साथ। हालांकि, अपरिभाषित और अशक्त तरीकों के बिना आदिम हैं।
इजाकाता

@ इजाका सच नहीं है। var str = 'primitive'; str.foo = 'bar'; /*wouldn't work*/जबकि var oStr = new String('string object'); oStr.foo = 'bar'; /*works*/ यदि आप इसे अमूर्त करने जा रहे हैं और उन्हें सभी ऑब्जेक्ट्स कहते हैं, तो आप आदिम वस्तुओं को आदिम सोच के साथ दूर कर सकते हैं, लेकिन यह सच जावास्क्रिप्ट वस्तुओं के सुपरक्लास के बराबर नहीं है।
Vol7ron

बस console.logवस्तुओं का निरीक्षण करने के लिए उपयोग करें
जॉन स्मिथ

13

वस्तु गुणों / मूल्यों की सूची प्राप्त करने के लिए:

  1. फ़ायरफ़ॉक्स में - फायरबग:

    console.dir(<object>);
  2. स्लैशनिक से ऑब्जेक्ट कीज़ प्राप्त करने के लिए स्टैंडर्ड जेएस :

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

7

i) इन दोनों वस्तुओं में क्या अंतर है

सरल उत्तर यह है कि [object]एक मेजबान वस्तु को इंगित करता है जिसमें कोई आंतरिक वर्ग नहीं है। एक होस्ट ऑब्जेक्ट एक ऐसी वस्तु है जो आपके द्वारा काम कर रहे ECMAScript कार्यान्वयन का हिस्सा नहीं है, लेकिन होस्ट द्वारा इसे विस्तार के रूप में प्रदान किया जाता है। DOM होस्ट ऑब्जेक्ट्स का एक सामान्य उदाहरण है, हालांकि अधिकांश नए कार्यान्वयनों में DOM ऑब्जेक्ट मूल ऑब्जेक्ट से विरासत में मिला है और इसमें आंतरिक वर्ग के नाम (जैसे HTMLElement , Window) , etc) हैं। IE का स्वामित्व ActiveXObject होस्ट ऑब्जेक्ट का एक और उदाहरण है।

[object] इंटरनेट एक्सप्लोरर 7 और निम्न में DOM ऑब्जेक्ट्स को अलर्ट करते समय सबसे अधिक देखा जाता है, क्योंकि वे होस्ट ऑब्जेक्ट हैं जिनका कोई आंतरिक वर्ग नाम नहीं है।

ii) यह किस प्रकार की वस्तु है

आप उपयोग करने वाली वस्तु का "प्रकार" (आंतरिक वर्ग) प्राप्त कर सकते हैं Object.prototype.toString। विनिर्देशन के लिए आवश्यक है कि यह हमेशा प्रारूप में एक स्ट्रिंग लौटाता है [object [[Class]]], जहां [[Class]]आंतरिक वर्ग का नाम होता है जैसे कि ऑब्जेक्ट , सरणी , दिनांक , RegExp , आदि। आप इस विधि को किसी भी ऑब्जेक्ट (होस्ट ऑब्जेक्ट सहित) पर लागू कर सकते हैं, का उपयोग करके

Object.prototype.toString.apply(obj);

कई isArrayकार्यान्वयन इस तकनीक का उपयोग यह जानने के लिए करते हैं कि क्या एक वस्तु वास्तव में एक सरणी है (हालांकि यह IE में उतना मजबूत नहीं है जितना कि अन्य ब्राउज़रों में है )।


iii) इस संपत्ति में सभी गुण क्या हैं और प्रत्येक संपत्ति के मूल्य

ECMAScript 3 में, आप एक for...inलूप का उपयोग करके असंख्य गुणों पर पुनरावृति कर सकते हैं । ध्यान दें कि अधिकांश अंतर्निहित गुण गैर-गणना योग्य हैं। कुछ मेज़बान वस्तुओं के बारे में भी यही सच है। ECMAScript 5 में, आप एक सरणी प्राप्त कर सकते हैं जिसमें सभी गैर-विरासत वाले गुणों के नाम हैं Object.getOwnPropertyNames(obj)। इस सरणी में गैर-गणना योग्य और गणना योग्य संपत्ति के नाम होंगे।


4

मुझे उम्मीद है कि यह स्पैम के रूप में नहीं गिना जाता है। मैंने अंतहीन डिबग सत्र के बाद एक समारोह लिखना विनम्रतापूर्वक समाप्त कर दिया: 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));

2

फायरबग जाओमोज़िला फ़ायरफ़ॉक्स के लिए ।

उपयोग console.log(obj);


1
मैं यह देखने में विफल रहता हूं कि आपका फायरबग खदान से कैसे अलग है, लेकिन मैं वस्तु को सूचीबद्ध करने के लिए लॉग की बजाय dir का उपयोग
करूंगा

console.logबस के रूप में प्रभावी है, आप वैसे भी "dir" पाने के लिए लॉग में ऑब्जेक्ट पर क्लिक कर सकते हैं ...
gnnf

1

स्पॉटलाइट.जेएस विंडो ऑब्जेक्ट और कुछ चीजों की तलाश में अन्य होस्ट ऑब्जेक्ट्स पर पुनरावृत्ति करने के लिए एक महान पुस्तकालय है।

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

आप इसके लिए इसे पसंद करेंगे।


0

एक निर्धारित प्रोप के पहले उद्देश्य के लिए स्कैनिंग वस्तु:

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));
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.