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

StackOverflow https://stackoverflow.com/questions/957537

  •  12-09-2019
  •  | 
  •  

سؤال

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

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

هل كانت مفيدة؟

المحلول

إذا كنت ترغب في طباعة الكائن لأغراض تصحيح الأخطاء، استخدم الرمز:

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

سوف يعرض:

screenshot console chrome

ملحوظة: يجب عليك أن فقط تسجيل الكائن. على سبيل المثال، لن يعمل هذا:

console.log('My object : ' + obj)

نصائح أخرى

استخدام الأصلية JSON.stringify طريقة. يعمل مع كائنات متداخلة وجميع المتصفحات الرئيسية الدعم هذه الطريقة.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

رابط ل Mozilla API المرجع وغيرها من الأمثلة.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

استخدام مخصص json.stringify استبدال إذا واجهت خطأ JavaScript هذا

"Uncaught TypeError: Converting circular structure to JSON"

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

console.dir(object):

يعرض قائمة تفاعلية من خصائص كائن JavaScript محدد. تتيح لك هذه الإدراج استخدام مثلثات الإفصاح لفحص محتويات الكائنات الفرعية.

نلاحظ أن console.dir() الميزة غير قياسية. يرى MDN مستندات الويب

جرب هذا :

console.log(JSON.stringify(obj))

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

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

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

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

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

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

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

إذا كنت ترغب في رؤية البيانات بتنسيق جدول، يمكنك استخدامها

console.table(obj);

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

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

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

يمكنك العثور على مزيد من المعلومات حول Console.Table هنا

دور:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

الاستعمال:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

مثال:

http://jsfiddle.net/wilsonpage/6eqmn/

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

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

استخدم هذا:

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

لطباعة الكائن الكامل مع node.js. مع الألوان كمكافأة:

console.dir(object, {depth: null, colors: true})

الألوان هي بالطبع اختياري، "العمق: null" سيقوم بطباعة الكائن الكامل.

لا يبدو أن الخيارات مدعومة في المتصفحات.

مراجع:

https:/developer.mozilla.org/en-us/docs/web/api/console/dir.

https://nodejs.org/api/console.html#console_console_dir_obj_options.

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

Console.log (تتطلب ("Util"). فحص (OBJ، {Showhidden: False، Depth: NULL})

إذا كنت ترغب في طباعة الكائن عن طريق تحويله إلى السلسلة ثم

console.log (json.stringify (OBJ))؛

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

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

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

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

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

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

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

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. وبعد لأن JavaScript حقا تخزن صفائف ككائنات، لا أستطيع التحقق في الواقع للنوع array (لا يوجد مثل هذا النوع!). إذا كان أي شخص آخر يعرف طريقة أفضل، أود أن أسمعها. لأنه، إذا كان كائنك يحتوي أيضا على خاصية اسمه length ثم ستعامل هذه الوظيفة عن طريق الخطأ كصفيف.

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

تحرير: أدناه هي الوظيفة الثابتة لتكون قادرا على طباعة كائنات متكررة بلا حدود. هذا لا يطبع نفسه toSource من FF بسبب 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.. وبعد والكروم سوف تعطل Uncaught RangeError: Maximum call stack size exceeded. وبعد بوضوح، document.body لم يكن من المفترض أن يتم تحويلها إلى سلسلة. لأنها إما كبيرة جدا، أو ضد سياسة الأمن للوصول إلى خصائص معينة. ما لم افسدت شيئا ما هنا، هل أخبر!

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

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "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>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

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

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // 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>';
    }
    return str;
};

الاستعمال:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );

ببساطة استخدام 

JSON.stringify(obj)

مثال

var args_string = JSON.stringify(obj);
console.log(args_string);

أو 

alert(args_string);

ملاحظة أيضا في وظائف JavaScript تعتبر كائنات.

في الواقع يمكنك تعيين خاصية جديدة مثل هذا

foo.moo = "stackoverflow";
console.log(foo.moo);

ملحوظة: في هذه الأمثلة، يحدد Yourobj الكائن الذي تريد دراسته.

أولا قبالة أفضل طريقة المفضلة لديك في عرض كائن:

هذه هي طريقة Defacto لإظهار محتويات كائن

console.log(yourObj)

سوف تنتج شيئا مثل:enter image description here

أعتقد أن أفضل حل هو البحث من خلال مفاتيح الكائنات، ثم من خلال قيم الكائنات إذا كنت تريد حقا معرفة ما يحمل الكائن ...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

سوف تخرج شيئا مثل:enter image description here(في الصورة أعلاه: المفاتيح / القيم المخزنة في الكائن)

يوجد أيضا هذا الخيار الجديد إذا كنت تستخدم Ecmascript 2016 أو أحدث:

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

هذا سوف ينتج إخراج أنيق:enter image description hereالحل المذكورة في إجابة سابقة: console.log(yourObj) يعرض الكثير من المعلمات و ليست الطريقة الأكثر سهولة في استخدام البيانات التي تريدها. وبعد هذا هو السبب في أنني أوصي بتسجيل مفاتيح ثم القيم بشكل منفصل.

القادم :

console.table(yourObj)

اقترح شخص ما في تعليق سابق هذا واحد، ولكن لم ينجح أبدا من أجلي. إذا كان يعمل لشخص آخر على متصفح مختلف أو شيء ما، ثم كودوس! لا يزال سوء وضع القانون هنا للإشارة! سيتم إخراج شيء من هذا القبيل إلى وحدة التحكم:enter image description here

إليك طريقة للقيام بذلك:

console.log("%o", obj);

أبسط طريقة:

console.log(obj);

أو مع رسالة:

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

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

أكثر تحديدات التنسيق

أنا دائما استخدام console.log("object will be: ", obj, obj1)وبعد بهذه الطريقة لا أحتاج إلى القيام بهذا الحل مع خطوط مع JSON. سيتم توسيع جميع خصائص الكائن بشكل جيد.

هناك طريقة أخرى لعرض الكائنات داخل وحدة التحكم JSON.stringify. وبعد الخروج من المثال أدناه:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));

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

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

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

console.log(object);

افترض كائن obj = {0:'John', 1:'Foo', 2:'Bar'}

محتوى كائن الطباعة

for (var i in obj){
    console.log(obj[i], i);
}

خرج وحدة التحكم (Chrome DevTools):

John 0
Foo 1
Bar 2

امل ان يساعد!

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

<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 في جافا سكريبت

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

/**
 * @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); المخرجات:
enter image description here 

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

enter image description here

انا افضل console.table للحصول على تنسيق كائن واضح، لذلك تخيل أن لديك هذا الكائن:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

وسترى جدول أنيق وقابل للقراءة مثل هذا أدناه:console.table

لقد استخدمت طريقة طباعة PageWil، وقد عملت بشكل جيد للغاية.

هنا هو إصداري الموسعة قليلا مع المسافات البادئة (قذرة) ومحددات الدعامة / أوب مميزة:

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

تعديل آخر لرمز PageWils ... لا يطبع أي شيء آخر غير السلاسل ويترك الرقم والحقول المنطقية فارغة واصمت بي الخطأ المطبعي على النوع الثاني فقط داخل الوظيفة كما تم إنشاؤه بواسطة 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;
};

وهنا وظيفة.

function printObj(obj) {
console.log((function traverse(tab, obj) {
    let str = "";
    if(typeof obj !== 'object') {
        return obj + ',';
    }
    if(Array.isArray(obj)) {            
        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
    }
    str = str + '{\n';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top