معنى - prototype in javascript




كيف يمكنني عرض كائن JavaScript؟ (20)

كيف يمكنني عرض محتوى كائن جافا سكريبت في تنسيق سلسلة مثل عندما alert متغير؟

نفس الطريقة المنسقة أرغب في عرض كائن.


جرب هذا :

console.log(JSON.stringify(obj))

هذا سوف يطبع نسخة الوصل من الكائن. لذا بدلاً من [object] كمخرج ستحصل على محتوى الكائن.


أبسط طريقة:

console.log(obj);

أو مع رسالة:

console.log("object is: %O", obj);

يمكن أن يحتوي الكائن الأول الذي يتم تمريره على محدد أو أكثر من محددات التنسيق. يتكون محدد النسق من علامة النسبة المئوية (٪) متبوعة بحرف يشير إلى التنسيق المطلوب تطبيقه.

مزيد من محددات التنسيق


إذا كنت تبحث عن شيء يمكنه إرجاع سلسلة محددة من أي كائن جافا سكريبت ، فراجع https://github.com/fresheneesz/beautinator . مثال:

var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}})
console.log(result)

النتائج في:

{ "font-size": "26px",
  "font-family": "'Open Sans', sans-serif",
  color: "white", overflow: "hidden",
  padding: "4px 4px 4px 8px",
  Text: { display: "block", width: "100%",
          "text-align": "center", "padding-left": "2px",
          "word-break": "break-word"
  }
}

يعمل حتى إذا كان هناك وظائف في الكائن الخاص بك.


إذا كنت ترغب في الاطلاع على البيانات بتنسيق جدولي يمكنك استخدامها

console.table(obj);

يمكن فرز الجدول إذا قمت بالنقر فوق عمود الجدول.

يمكنك أيضًا تحديد الأعمدة المراد إظهارها:

console.table(obj, ['firstName', 'lastName']);

يمكنك العثور على مزيد من المعلومات حول console.table here


إذا كنت تريد استخدام التنبيه ، لطباعة الكائن ، يمكنك القيام بذلك:

alert("myObject is " + myObject.toSource());

يجب أن يطبع كل خاصية والقيمة المقابلة لها في تنسيق السلسلة.


إذا كنت تريد طباعة الكائن لأغراض التصحيح ، أقترح بدلاً من ذلك تثبيت Firebug for Firefox واستخدام الشفرة:

console.log(obj)

استخدم هذا:

console.log('print object: ' + JSON.stringify(session));

استخدمت أسلوب الطباعة pagewil ، وعملت بشكل جيد جدا.

هنا هو نسخة مطولة قليلاً مع المسافات البادئة (قذرة) ومحددات محددة للدعم / ob:

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};

تعديل آخر لشفرة الصفحة ... لا يطبع أي شيء آخر غير السلاسل ويترك العدد والمجالات المنطقية فارغة ، وقمت بإصلاح الخطأ المطبعي في النوع الثاني فقط داخل الوظيفة كما تم إنشاؤها بواسطة megaboss.

var print = function( o, maxLevel, level )
{
    if ( typeof level == "undefined" )
    {
        level = 0;
    }
    if ( typeof maxlevel == "undefined" )
    {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 )
    {
        str = '<pre>';   // can also be <pre>
    }

    var levelStr = '<br>';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with <pre>
    }

    if ( maxLevel != 0 && level >= maxLevel )
    {
        str += levelStr + '...<br>';
        return str;
    }

    for ( var p in o )
    {
        switch(typeof o[p])
        {
          case 'string':
          case 'number':    // .tostring() gets automatically applied
          case 'boolean':   // ditto
            str += levelStr + p + ': ' + o[p] + ' <br>';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
            break;
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 )
    {
        str += '</pre>';   // also can be </pre>
    }
    return str;
};

حسنا ، فايرفوكس (بفضلBojangles للحصول على معلومات تفصيلية) لديه Object.toSource() الذي يطبع الكائنات ك JSON function(){} .

هذا يكفي لمعظم أغراض تصحيح الأخطاء ، أعتقد.


في NodeJS يمكنك طباعة كائن باستخدام util.inspect(obj) . تأكد من ذكر العمق أو ستحصل فقط على طبعة ضحلة من الكائن.


كما قيل من قبل أفضل وأكثر طريقة ببساطة وجدت

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}


وظيفة مساعد صغيرة أستخدمها دائمًا في مشاريعي لتصحيح الأخطاء بسرعة وبسرعة عبر وحدة التحكم. إلهام مأخوذ من Laravel.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

استعمال

dd(123.55); المخرجات:

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 


يبدو أن عملية بسيطة for...in لا يمكن أن تحل المشكلة خاصة عندما نريد التعامل مع بعضها بعيدًا عن الكائنات المخصصة أو المضيفة أو الأصلية أو CSSOM. إلى جانب ذلك ، نحن نتحدث عن تصحيح الأخطاء هنا ومن يدري متى وأين سنحتاج إليه!

يمكن لمكتبتي الصغيرة التعامل مع أشياء كهذه:

    obj2
     |__ foo = 'bar'
     |__ loop2 = obj2
     |            :
     |__ another = obj1
                    |__ a1 = 1
                    |__ b1 = 'baz'
                    |__ loop1 = obj1
                    |            :
                    |__ c1 = true
                    |__ d1 = ''
                    |__ e1 = [1,2,3]

وتقديمها ملونة ومع الهوية مثل:

  1. 0 ، foo ، "bar"
  2. 0 ، loop2 ، 'يحتوي على مرجع دائري للكائن في الفهرس 0'
  3. 0 ، آخر ، "كائن"
  4. 1 ، a1 ، 1
  5. 1 ، b1 ، "baz"
  6. 1 ، loop1 ، "يحتوي على مرجع دائري للكائن في الفهرس 2"
  7. 1 ، و c1 ، و "صحيح"
  8. 1 ، d1 ، "
  9. 1 ، e1 ، [1،2،3]

لكن ارى هناك:

  1. https://github.com/centurianii/jsdebug
  2. http://jsfiddle.net/centurianii/92Cmk/36/

مع بعض الاحتياطات حتى document.body يتم تحليلها!


يمكنك استخدام وظيفتي.
استدعاء هذه الوظيفة مع صفيف أو سلسلة أو كائن تنبيهات المحتويات.

وظيفة

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

استعمال

var data = [1, 2, 3, 4];
print_r(data);

(تمت إضافة هذا إلى مكتبتي في GitHub )

إعادة اختراع العجلة هنا! لم تنجح أي من هذه الحلول في حلقي. لذلك ، سرعان ما أخطأت في الإجابة على صفحة الصفحة. هذا واحد ليس للطباعة إلى الشاشة (عن طريق وحدة التحكم ، أو حقل النص أو أيا كان). ومع ذلك ، لنقل البيانات. يبدو أن هذا الإصدار يعيد نتيجة مشابهة جدًا toSource() . لم أحاول JSON.stringify ، ولكن أفترض أن هذا هو نفس الشيء. نتيجة هذه الوظيفة عبارة عن تعريف كائن جافاسكريبت صالح.

لن أشك إذا كان هناك شيء من هذا القبيل كان موجودًا بالفعل في مكان ما ، ولكنه كان أقصر من مجرد قضاء بعض الوقت في البحث عن الإجابات السابقة. وبما أن هذا السؤال كان الأكثر نجاحًا على google عندما بدأت البحث عن هذا ؛ اعتقدت أن وضعه هنا قد يساعد الآخرين.

على أي حال ، ستكون النتيجة من هذه الوظيفة عبارة عن تمثيل سلسلة للكائن الخاص بك ، حتى إذا كان الكائن يحتوي على كائنات ومصفوفات مدمجة ، وحتى إذا كانت هذه الكائنات أو المصفوفات تحتوي على المزيد من الكائنات والمصفوفات المضمنة. (سمعت بأنك تحب أن تشرب؟ لذا ، كنت أقود سيارتك ببرودة ، ثم قمت بقوادة مبردك ببرودة. لذا ، يمكن أن يشرب المبرد ، بينما يكون تبريدك باردًا).

يتم تخزين المصفوفات مع [] بدلاً من {} وبالتالي لا تملك أزواج مفاتيح / قيم ، فقط قيم. مثل المصفوفات العادية. لذلك ، يتم إنشاؤها مثل المصفوفات.

أيضاً ، يتم ذكر كل السلسلة (بما في ذلك أسماء المفاتيح) ، وهذا ليس ضروريًا إلا إذا كانت تلك السلاسل تحتوي على أحرف خاصة (مثل مسافة أو شرطة مائلة). ولكني لم أشعر برغبة في الكشف عن هذا فقط لإزالة بعض الاقتباسات التي ما زالت تعمل بشكل جيد.

ويمكن بعد ذلك استخدام هذه السلسلة الناتجة مع eval أو مجرد إلقاءها في التلاعب بالسلسلة من خلال السلسلة. وبالتالي ، إعادة إنشاء الكائن مرة أخرى ، من النص.

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

اسمحوا لي أن أعرف إذا كنت أفسدت كل شيء ، يعمل بشكل جيد في الاختبار الخاص بي. أيضا ، كانت الطريقة الوحيدة التي كنت أفكر في الكشف عن array نوع للتحقق من وجود length . نظرًا لأن جافا سكريبت تخزن المصفوفات كأشياء ، لا يمكنني التحقق من array النوع (لا يوجد مثل هذا النوع!). إذا كان أي شخص آخر يعرف طريقة أفضل ، أود أن أسمع ذلك. لأنه إذا كان الكائن الخاص بك يحتوي أيضًا على خاصية مسماة length فستتعامل هذه الدالة عن طريق الخطأ مع صفيف.

تحرير: إضافة التحقق من الأشياء ذات القيمة الفارغة. شكرا بروك ادامز

تحرير: أدناه هي وظيفة ثابتة لتكون قادرة على طباعة الكائنات العودية لا حصر لها. هذا لا يطبع نفس toSource من FF لأن toSource سيقوم بطباعة العودية اللانهائية مرة واحدة ، حيث أن هذه الوظيفة toSource على الفور. تعمل هذه الوظيفة بشكل أبطأ من الدالة المذكورة أعلاه ، لذلك أقوم بإضافتها هنا بدلاً من تحرير الوظيفة المذكورة أعلاه ، حيث أنها تحتاج فقط إذا كنت تخطط لتمرير الأشياء التي ترتبط بها إلى نفسها ، في مكان ما.

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

اختبار:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

نتيجة:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

ملاحظة: محاولة طباعة document.body هو مثال فظيع. لأحد ، FF فقط طباعة سلسلة كائن فارغة عند استخدام toSource . وعند استخدام الدالة أعلاه ، يتعطل FF على SecurityError: The operation is insecure. . وسيتم تعطل Chrome على Uncaught RangeError: Maximum call stack size exceeded . بوضوح ، لم يكن من المفترض أن يتم تحويل document.body إلى سلسلة. لأنها إما كبيرة جدا ، أو ضد سياسة الأمن للوصول إلى خصائص معينة. ما لم ، أنا أفسدت شيئاً هنا ، قل!


وظيفة جافا سكريبت

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

كائن الطباعة

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

عبر print_r في Javascript


var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

حيث object هو الكائن الخاص بك

أو يمكنك استخدام هذا في أدوات التطوير من Chrome ، علامة تبويب "وحدة التحكم":

console.log(object);


var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);




javascript-objects