Ответ 1

Если вы хотите напечатать объект в целях отладки, используйте код:

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

отобразит:

Примечание: вы должны только регистрировать объект. Например, это не сработает:

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

Примечание ': Вы также можете использовать запятую в методе log, тогда первая строка вывода будет строкой, и после этого объект будет визуализирован:

console.log('My object: ', obj);

Ответ 2

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

Ответ 3

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

Ответ 4

console.dir(object):

Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволяет использовать раскрывающиеся треугольники для изучения содержимого дочерних объектов.

Обратите внимание, что функция console.dir() нестандартна. См. Веб-документы MDN

Ответ 5

попробуйте следующее:

console.log(JSON.stringify(obj))

Это приведет к печати строковой версии объекта. Поэтому вместо [object] в качестве вывода вы получите содержимое объекта.

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

console.table(obj);

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

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

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

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

Ответ 10

Функция:

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/

Ответ 11

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

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

Ответ 12

Используйте это:

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

Ответ 13

Чтобы напечатать полный объект с помощью 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

Ответ 14

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

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

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

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

Ответ 15

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

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

Я не сомневаюсь, что что-то подобное уже было где-то на SO, но сделать это было короче, чем тратить время на поиск ответов в прошлом. И так как этот вопрос был моим главным хитом в 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. Поскольку 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.. И Chrome рухнет на Uncaught RangeError: Maximum call stack size exceeded. Очевидно, что document.body не предназначался для преобразования в строку. Потому что либо слишком велик, либо против политики безопасности для доступа к определенным свойствам. Если я не испортил что-то здесь, скажи!

Ответ 16

NB: В этих примерах yourObj определяет объект, который вы хотите исследовать.

Прежде всего, мой наименее любимый, но наиболее используемый способ отображения объекта:

Это дефактный способ отображения содержимого объекта

console.log(yourObj)

выдаст что-то вроде:

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

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

Он выведет что-то вроде: (на фото выше: ключи/значения, хранящиеся в объекте)

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

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

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

Далее:

console.table(yourObj)

Кто-то из предыдущих комментариев предложил это, но у меня это никогда не получалось. Если это работает для кого-то еще в другом браузере или что-то еще, тогда слава! Я все еще положил код здесь для справки! Будет выводить что-то вроде этого на консоль:

Ответ 17

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

JSON.stringify(obj)

пример

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

Или же

alert(args_string);

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

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

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

Ответ 18

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

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

Ответ 19

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

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

Ответ 20

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

console.log(obj);

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

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

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

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

Ответ 21

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

Ответ 22

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

Ответ 23

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

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

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

console.log(object);

Ответ 24

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

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

Ответ 25

Функция 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

Ответ 26

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

console.dir(yourObject);

Ответ 27

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

Ответ 28

Я предпочитаю использовать console.table для получения четкого формата объекта, поэтому представьте, что у вас есть этот объект:

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

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

Ответ 29

Я использовал метод печати 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;
};

Ответ 30

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