Как я могу отобразить объект JavaScript?

Используйте собственный метод 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()

Ссылка на Справочник по API Mozilla и другие примеры.

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] в качестве вывода вы получите содержимое объекта.

Ну, Firefox (спасибо @Bojangles за подробную информацию) имеет Object.toSource() метод, который печатает объекты как JSON и function(){}.

Этого достаточно для большинства целей отладки, я думаю.

Если вы хотите использовать оповещение, чтобы распечатать свой объект, вы можете сделать это:

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

Он должен печатать каждое свойство и соответствующее ему значение в строковом формате.

В NodeJS вы можете распечатать объект, используя util.inspect(obj). Не забудьте указать глубину или у вас будет только мелкая печать объекта.

Функция:

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: '[email protected]',
        tel: '123456789'
    }  
}

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

Пример:

http://jsfiddle.net/WilsonPage/6eqMn/

Если вы хотите видеть данные в табличном формате, вы можете использовать

console.table(obj);

Таблица может быть отсортирована, если вы щелкните по столбцу таблицы.

Вы также можете выбрать, какие столбцы отображать:

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

Дополнительную информацию о console.table здесь можно найти здесь

Как было сказано раньше, самым лучшим и самым простым способом я нашел

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

Чтобы напечатать полный объект с помощью Node.js с цветами в качестве бонуса:

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

Цвета, конечно, необязательны, "depth: 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('print object: ' + JSON.stringify(session));

Если вы хотите напечатать объект своей полной длины, можете использовать

console.log(require ('util'). проверить (obj, {showHidden: false, depth: null})

Если вы хотите напечатать объект, преобразовывая его в строку, то

console.log(JSON.stringify(OBJ));

Мне нужен был способ рекурсивной печати объекта, на который предоставлен ответ на страницу (спасибо!). Я немного обновил его, чтобы включить способ печати на определенный уровень, и добавить интервал так, чтобы он был правильно отступом на основе текущего уровня, в котором мы находимся, чтобы он был более читабельным.

// 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: '[email protected]',
        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) ); 

(Это было добавлено в мою библиотеку в GitHub)

Переосмыслив колесо здесь! Ни одно из этих решений не работало для моей ситуации. Итак, я быстро усовершенствовал ответ на страницу. Это не для печати на экран (через консоль, текстовое поле или что-то еще). Это, однако, для переноса данных. Кажется, что эта версия возвращает очень похожий результат как toSource(). Я не пробовал JSON.stringify, но я предполагаю, что это примерно то же самое. Результатом этой функции является действительное объявление объекта Javascript.

Я бы не сомневался, что что-то вроде этого уже было где-то на SO, но это было просто короче, чем потратить время на поиск прошлых ответов. И поскольку этот вопрос был моим лучшим хитом в google, когда я начал искать об этом; Я полагал, что это может помочь другим.

Во всяком случае, результат этой функции будет представлять собой строковое представление вашего объекта, даже если ваш объект имеет встроенные объекты и массивы, и даже если у этих объектов или массивов еще есть встроенные объекты и массивы. (Я слышал, как вы любите выпить? Итак, я кувал вашу машину с кулером, а затем я кувал кулер кулером. Итак, ваш кулер может выпить, пока вы будете крутыми).

Массивы хранятся с [] вместо {} и, следовательно, не имеют пары ключ/значение, просто значения. Как обычные массивы. Поэтому они создаются подобно массивам.

Кроме того, вся строка (включая имена ключей) цитируется, это необязательно, если только эти строки не имеют специальных символов (например, пробела или косой черты). Но мне не хотелось обнаруживать это только для того, чтобы удалить некоторые кавычки, которые в противном случае все еще работали бы нормально.

Затем эту результирующую строку можно использовать с eval или просто сбрасывать в переменную string. Таким образом, снова создайте свой объект из текста.

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 эта функция ошибочно будет рассматривать его как массив.

EDIT: Добавлена проверка для объектов с нулевой оценкой. Спасибо, Брок Адамс

EDIT: Ниже фиксированная функция, позволяющая печатать бесконечно рекурсивные объекты. Это не печатает то же, что и toSource из FF, потому что toSource будет печатать бесконечную рекурсию один раз, где as, эта функция немедленно ее уничтожит. Эта функция работает медленнее, чем предыдущая, поэтому я добавляю ее здесь вместо редактирования вышеприведенной функции, поскольку ее нужно только, если вы планируете передавать объекты, которые ссылаются на себя где-то.

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 не предназначался для преобразования в строку. Потому что он слишком большой или против политики безопасности для доступа к определенным свойствам. Если бы я не испортил что-то здесь, не говорите!

Самый простой способ:

console.log(obj);

Или с сообщением:

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

Первый передаваемый вами объект может содержать один или несколько спецификаторов формата. Спецификатор формата состоит из знака процента (%), за которым следует буква, указывающая на применимость форматирования.

Больше спецификаторов формата

Я всегда использую console.log("object will be: ", obj, obj1). таким образом, мне не нужно делать обходной путь с помощью строки с JSON. Все свойства объекта будут хорошо расширены.

Предположим, что объект 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

Надеюсь, что это поможет!

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

где object - ваш объект

или вы можете использовать это в инструментах chrome dev, вкладке "console":

console.log(object);

Другой способ отображения объектов в консоли - с помощью 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));

Один из лучших и простых способов - использовать console.dir();

console.dir(yourObject);

Функция Javascript

<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

Вот как это сделать:

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

Небольшая вспомогательная функция, которую я всегда использую в своих проектах для простой и быстрой отладки через консоль.  Вдохновение взято из 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'); 

Я думаю, что лучшим решением является просмотр ключей объектов, а затем значений объектов, если вы действительно хотите увидеть, что содержит объект...

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

Существует также эта новая опция, если вы используете ECMAScript 2016 или новее:

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

Решение, упомянутое выше: console.log(obj) отображает слишком много параметров и является не самым удобным способом отображения нужных вам данных. Вот почему я рекомендую регистрировать ключи, а затем значения отдельно.

Здесь функция.

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

Он может отображать объект, используя вкладку tab с удобочитаемостью.

возможно, вы ищете этот

console.dir()

Другая модификация кода 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;
};

Я использовал метод печати pagewil, и он работал очень хорошо.

вот моя слегка расширенная версия с (неаккуратными) отступами и отдельными разделителями prop/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;
};

Просто использовать

JSON.stringify(obj)

пример

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

Или же

alert(args_string);

Также обратите внимание, что в JavaScript функции рассматриваются как объекты.

На самом деле вы можете назначить новое свойство, как это

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

Если вы ищете что-то, что может вернуть префиксную строку любого объекта javascript, проверьте 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 для получения четкого формата объекта, поэтому представьте, что у вас есть этот объект:

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

И вы увидите аккуратную и удобочитаемую таблицу, подобную этой ниже:

Он не будет работать в браузере, и вам может понадобиться это только в том случае, если вы хотите получить действительное представление JS для вашего объекта, а не JSON. Он просто запускает встроенную оценку узла

var execSync = require('child_process').execSync

const objectToSource = (obj) =>
  execSync('node -e \'console.log(JSON.parse('' + JSON.stringify(obj) + ''))\'', { encoding: 'utf8' })

console.log(objectToSource({ a: 1 }))

Попробуй это:

var object = this.window;
console.log(object,'this is window object');

Выход:

Простой способ показать содержимое объекта - использовать console.log, как показано ниже

console.log("Object contents are ", obj);

Обратите внимание, что я не использую "+" для объединения объекта. Если я использую "+", я получу строковое представление только для объекта, что-то вроде [Object object].

Похоже, что простой 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, 'true'
8. 1, d1, ''
9. 1, e1, [1,2,3]

но см. там:

• https://github.com/centurianii/jsdebug
• 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);