console.log 显示数组对象的内容

73

我尝试使用 console.log 来查看包含多个对象的数组的内容。但是我收到了一个错误,说 console.log 不是一个对象等等。我正在使用 jQuery 1.6.2,我的数组是这样的:

filters = {dvals:[{'brand':'1', 'count':'1'},
                  {'brand':'2', 'count':'2'}, 
                  {'brand':'3', 'count':'3'}]}

console.log(filters);

我想要做的是将array(filters)的内容以filters格式写入到一个弹出框中(我原以为console.log会这样做),该怎么做呢?


7
你使用的是什么浏览器?console 对象只在特定的浏览器或附加组件中可用。 - Phil
对我来说可以运行:http://jsfiddle.net/PxZjr/ - red-X
我现在对console.log有了更深入的理解。 - ONYX
@ryanOptini - Opera使用的是Presto而不是WebKit。它确实有console.log,但是通过Dragonfly而不是WebKit检查器。 - Quentin
@Quentin,抱歉有点晚了,但你是正确的。 - Ryan
显示剩余7条评论
7个回答

106

有两种简单的解决方案可以将数组转换为字符串。具体取决于所使用的环境:

......在现代浏览器中,可以使用JSON:

JSON.stringify(filters);
// returns this
"{"dvals":[{"brand":"1","count":"1"},{"brand":"2","count":"2"},{"brand":"3","count":"3"}]}"

使用类似node.js这样的工具,您可以使用console.info()。

console.info(filters);
// will output:
{ dvals: 
[ { brand: '1', count: '1' },
  { brand: '2', count: '2' },
  { brand: '3', count: '3' } ] }

编辑:

JSON.stringify有两个可选参数。第三个“spaces”参数可以启用漂亮的打印:

JSON.stringify(
                obj,      // the object to stringify
                replacer, // a function or array transforming the result
                spaces    // prettyprint indentation spaces
              )

例子:

JSON.stringify(filters, null, "  ");
// returns this
"{
 "dvals": [
  {
   "brand": "1",
   "count": "1"
  },
  {
   "brand": "2",
   "count": "2"
  },
  {
   "brand": "3",
   "count": "3"
  }
 ]
}"

12
我建议有人在未来的JavaScript版本中修复它,并使对象默认自动转换为合理的字符串表示形式。也许没有人想看到Object[Object]。 - Sergey Orshanskiy

26
在JavaScript中,将对象打印到控制台非常简单。只需使用以下语法:
console.log( object );

或者

console.log('object: %O', object );

一个相对较少人知道的方法是通过以下方式将对象或数组打印到控制台中作为表格显示:
console.table( object );
我认为很重要的一点是,这种日志语句只在浏览器环境中有效。我在Google Chrome中使用过这个方法。您可以在开发者控制台中查看console.log调用的输出:右键单击网页中的任何元素,选择“检查”。选择“控制台”选项卡。
这些语句也适用于NodeJS环境。输出默认会发送到标准输出。例如,NodeJS进程正在运行的终端。
NodeJS的console.log调用不会打印完整的对象树。而是将子对象打印为[Object object]。要在输出中看到完整的对象,您需要使用util.inspect,像这样:
console.log(util.inspect(object, true, 10))

2
console.table( object ) 是一个很棒的主意,谢谢 - Saghachi
1
控制台.表格 赢了 - Binoy S Kumar

12

console.log不会产生任何消息框。我认为在任何IE版本中(包括Firefox),它都没有提供,除非安装了firebug或某些等效工具。

但是,在Safari和Chrome中可以使用该功能。由于你提到了Chrome,我将以此为例。

您需要打开您的窗口及其相应的开发者窗口。您可以通过右键单击页面上的任何元素并选择“检查元素”来实现此操作。您的窗口将被分为两个部分,其中开发者部分位于底部。两个部分之间有一个带有按钮的条形区域,在最右边的按钮标有“控制台”。您需要点击它以切换到控制台选项卡。在Windows上的大多数浏览器中,按F12可调出开发者工具,在macOS上则是command + shift + I。

一旦进入控制台,您将能够通过javascript与顶部加载的任何页面进行交互,并且任何您console.log的信息都将在那里显示。


你需要安装并启用IE开发者工具调试器。只需访问网页进行调试,然后按F12键以启用调试器。这将定义你在代码中使用的控制台。 - GuruM
@GuruM:这只会输出对象本身,而不像在FireFox或Chrome中那样输出对象的内容。 - Neil Knight
@NeilKnight。提问者可以使用本页面其他地方指定的技术来查找。我只是告诉他如何激活IE调试器。Kris没有提到如何在IE中打开调试器,所以我只是填补了这个空白。 - GuruM

3
console对象适用于Internet Explorer 8或更新版本,但仅在通过按下F12或菜单打开“开发人员工具”窗口时才可用。
即使您再次关闭“开发人员工具”窗口,它仍然保持可用,直到关闭IE浏览器。
Chorme和Opera浏览器始终有一个可用的console,至少在当前版本中是如此。 Firefox 使用Firebug时具有console,但也可能在没有Firebug的情况下提供console
无论如何,将console输出的使用设置为可选项是一种安全的方法。以下是一些示例:
if (console) {
    console.log('Hello World!');
}

if (console) console.debug('value of someVar: ' + someVar);

我从未听说过这种方法,个人认为在调试代码时有点不方便。当使用打包工具(例如Angular使用Webpack作为打包工具)时,您的代码将被处理,所有日志语句都将被消除。 - Torsten Barthel

1
我强烈推荐这个代码片段,以确保客户端浏览器上不会因为遗漏的代码而出现故障:
/* neutralize absence of firebug */
if ((typeof console) !== 'object' || (typeof console.info) !== 'function') {
    window.console = {};
    window.console.info = window.console.log = window.console.warn = function(msg) {};
    window.console.trace = window.console.error = window.console.assert = function(msg) {};
}

与定义一个空函数不同,这个代码片段也是一个很好的起点,如果需要可以滚动自己的控制台代理,即将这些信息转储到.debug容器中、显示警报(可能会有很多)或其他等等...

如果您使用firefox+firebug,则最好使用console.dir()来转储数组输出,在此处查看


1

Json代表JavaScript对象表示法,实际上所有的json都是JavaScript对象,因此您的数组已经以json形式存在。要将其写入div中,您可以做很多事情,其中最简单的一种可能是:

 objectDiv.innerHTML = filter;

其中objectDiv是您想要使用jquery从DOM中选择的div。如果您想要列出数组的某些部分,可以像访问javascript对象一样访问它们:

 objectDiv.innerHTML = filter.dvals.valueToDisplay; //brand or count depending.

编辑:任何你想要成为字符串但目前不是的内容(在 JavaScript 中这很少,因为几乎所有东西都被视为字符串),只需使用内置的 toString() 函数。所以上面一行如果你需要它的话,就会是 filter.dvals.valueToDisplay.toString();

第二次编辑以澄清:这个答案是针对 OP 的评论而不是完全针对他的原始问题。


1

看起来像是Firebug或者你使用的任何调试器没有正确初始化。你确定在尝试访问console.log()方法时,Firebug已经完全初始化了吗?检查控制台选项卡(如果已激活)。

另一个可能性是,在代码的任何地方你自己覆盖了console对象。


我在IE8和Google Chrome中使用console.log,但没有得到任何结果,这是浏览器设置的问题吗? - ONYX
@KDM - console.log消息将出现在IE开发人员工具调试器中“脚本”选项卡右侧的“控制台”窗口中。您需要访问要调试的网页,按F12键激活调试器。选择“开始调试”,然后选择“脚本”选项卡。运行脚本以在“控制台”窗口中查看日志消息。 - GuruM

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接