打印 JavaScript 对象的内容？ [复制]

Posted 2023-02-22

【中文标题】打印 JavaScript 对象的内容？ [复制]

【英文标题】：Print content of JavaScript object? [duplicate]

【发布时间】：2010-12-10 03:49:29

【问题描述】：

通常，如果我们只使用alert(object);，它将显示为[object Object]。 javascript中如何打印一个对象的所有内容参数？

【参考方案1】：

这将为您提供非常好的输出，其中包含使用 JSON.stringify 的缩进 JSON 对象：

alert(JSON.stringify(YOUR_OBJECT_HERE, null, 4));

第二个参数 (replacer) 在返回之前更改字符串的内容。

第三个参数 (space) 指定使用多少空格作为空白以提高可读性。

JSON.stringify 文档here。

【讨论】：

+1 用于跨平台支持。在 ECMAScript 第 5 版中标准化，支持 Firefox 3.6、Chrome（版本？）、Safari 4 和 IE8。仅供参考：第 4 个参数是每个缩进级别的空格数。它也可以是一个字符串，例如“\t”。如果您想限制显示的内容，则 null 参数是过滤函数的占位符。见：developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

在 IE8 JS 调试器中无穷无尽的用处。

这不适用于具有循环引用链的对象 - Chrome 给出错误：TypeError: Converting curcular structure to JSON

我在 Chrome 中看到了同样的循环结构错误：Uncaught TypeError: Converting circular structure to JSON。我做错了什么，还是 Chrome 特有的？

不错的答案。你拯救了我的一天，我在 Phonegap 中使用它。

【参考方案2】：

我遇到了类似的问题，原因是我使用 ajax 来获取数据。 在这种情况下，我进行了两次异步 ajax 调用。在一个我只是返回字符串味精并显示在警报中。在第二个 ajax 调用中，我以 json 格式获取 arraylist 并在 js 中对其进行解码。 所以我的第二个请求首先用于处理，我得到了对象的警报。

所以检查一下。 1. alert 应该包含字符串。 2.如果你得到arrayList或任何其他对象解码它。

一切顺利！

【参考方案3】：

打印您可以使用的对象的内容

console.log(obj_str);

您可以在控制台中看到结果，如下所示。

Object description: "test" 

在 chrome 浏览器中按 F12 打开控制台，您将在调试模式下找到控制台选项卡。

【参考方案4】：

您可以使用 Node 的 util.inspect(object) 打印出对象的结构。

当您的对象具有循环依赖时尤其有用，例如

$ node

var obj = 
   "name" : "John",
   "surname" : "Doe"

obj.self_ref = obj;

util = require("util");

var obj_str = util.inspect(obj);
console.log(obj_str);
// prints  name: 'John', surname: 'Doe', self_ref: [Circular] 

如果 JSON.stringify 抛出异常：TypeError: Converting circular structure to JSON

【讨论】：

谢谢。这可以用于打印到日志的地方。

【参考方案5】：

警告对象或数组内容的简单函数。 使用数组或字符串或对象调用此函数，它会提醒内容。

功能

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

【参考方案6】：

为所有人提供 JavaScript！

String.prototype.repeat = function(num) 
    if (num < 0) 
        return '';
     else 
        return new Array(num + 1).join(this);
    
;

function is_defined(x) 
    return typeof x !== 'undefined';


function is_object(x) 
    return Object.prototype.toString.call(x) === "[object Object]";


function is_array(x) 
    return Object.prototype.toString.call(x) === "[object Array]";


/**
 * Main.
 */
function xlog(v, label) 
    var tab = 0;

    var rt = function() 
        return '    '.repeat(tab);
    ;

    // Log Fn
    var lg = function(x) 
        // Limit
        if (tab > 10) return '[...]';
        var r = '';
        if (!is_defined(x)) 
            r = '[VAR: UNDEFINED]';
         else if (x === '') 
            r = '[VAR: EMPTY STRING]';
         else if (is_array(x)) 
            r = '[\n';
            tab++;
            for (var k in x) 
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            
            tab--;
            r += rt() + ']';
         else if (is_object(x)) 
            r = '\n';
            tab++;
            for (var k in x) 
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            
            tab--;
            r += rt() + '';
         else 
            r = x;
        
        return r;
    ;

    // Space
    document.write('\n\n');

    // Log
    document.write('< ' + (is_defined(label) ? (label + ' ') : '') + Object.prototype.toString.call(v) + ' >\n' + lg(v));
;



// Demo //

var o = 
    'aaa' : 123,
    'bbb' : 'zzzz',
    'o' : 
        'obj1' : 'val1',
        'obj2' : 'val2',
        'obj3' : [1, 3, 5, 6],
        'obj4' : 
            'a' : 'aaaa',
            'b' : null
        
    ,
    'a' : [ 'asd', 123, false, true ],
    'func' : function() 
        alert('test');
    ,
    'fff' : false,
    't' : true,
    'nnn' : null
;

xlog(o, 'Object'); // With label
xlog(o); // Without label

xlog(['asd', 'bbb', 123, true], 'ARRAY Title!');

var no_definido;
xlog(no_definido, 'Undefined!');

xlog(true);

xlog('', 'Empty String');

【参考方案7】：

您还可以使用 Prototype 的 Object.inspect() 方法，该方法“返回对象的面向调试的字符串表示形式”。

http://api.prototypejs.org/language/Object/inspect/

【讨论】：

JavaScript 库在语言的基本方面之后调用自己是非常无益的。

【参考方案8】：

您可以使用http://www.json.org/js.html 中的json.js 将json 数据更改为字符串数据。

【参考方案9】：

您可以在其原型中为您的对象提供自己的 toString 方法。

【参考方案10】：

使用目录（对象）。或者你可以随时下载Firebug for Firefox（真的很有帮助）。

【讨论】：

目录？需要包含任何特殊的js文件吗？

它只需要firebug扩展

console.dir(object) 在 Firebug 的控制台窗格中打印输出。返回“_firebugIgnore”，因此它不能与 alert() 一起使用。记录在getfirebug.com/wiki/index.php/…

【参考方案11】：

如果您使用的是 Firefox，alert(object.toSource()) 应该足以用于简单的调试目的。

【讨论】：

IE9 也支持（如果不是更早版本的话），但 Chrome 17 或 Safari 5 不支持。

是否有跨浏览器的方式来做类似的事情？

在最近的浏览器中，您可以使用console.dir(object) 将对象的内容转储到调试控制台（大多数浏览器上为 F12）。

我试图在 console.log(object.toSource());对我没用..

使用 firefox 量子 58，object.toSource() 极大地降低了浏览器的速度。它可能是我的对象（json 字符串），但它不应该发生。编辑：它实际上是一个循环对象值。 JSON.stringify() 向控制台发送警告，这比 .toSource() 行为更好（无警告，半冻结）

【参考方案12】：

Internet Explorer 8 具有类似于 Firefox 的 Firebug 的开发人员工具。 Opera 有 Opera DragonFly，Google Chrome 也有一个叫做开发者工具（Shift+Ctrl+J）的东西。

以下是在 IE6-8 中调试 JavaScript 的更详细答案： Using the IE8 'Developer Tools' to debug earlier IE versions

【参考方案13】：

除了使用调试器之外，您还可以使用foreach 循环访问对象的所有元素。下面的 printObject 函数应该 alert() 你的对象显示所有属性和相应的值。

function printObject(o) 
  var out = '';
  for (var p in o) 
    out += p + ': ' + o[p] + '\n';
  
  alert(out);


// now test it:
var myObject = 'something': 1, 'other thing': 2;
printObject(myObject);

最好使用 DOM 检查工具，因为它允许您深入了解对象本身的属性。 Firefox 有 FireBug，但所有其他主要浏览器（IE、Chrome、Safari）也有内置的调试工具，您应该检查一下。

【讨论】：

可能想在循环中添加 if (o.hasOwnProperty(p))

这是个好主意，但在调试时我宁愿看到所有内容。也许更好的是： for (var p in o) if (!o.hasOwnProperty(p)) out += '(inherited) ';出 += p + ': ' + o[p] + '\n';

【参考方案14】：

如果您只是想要一个对象的字符串表示，您可以使用JSON.stringify 函数，使用JSON library。

【讨论】：

这是最好的答案恕我直言，它适用于所有浏览器

【参考方案15】：

您应该考虑使用 FireBug 进行 JavaScript 调试。它可以让您以交互方式检查所有变量，甚至可以单步执行函数。