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

Posted 2023-02-21

【中文标题】console.log 显示数组对象的内容

【英文标题】：console.log showing contents of array object

【发布时间】：2011-12-16 06:55:45

【问题描述】：

我已尝试使用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) 的内容写到警报框（我认为console.log 就是这样做的）。我该怎么做？

【问题讨论】：

你用的是什么浏览器？ console 对象仅在某些浏览器或附加组件上可用

为我工作：jsfiddle.net/PxZjr

我使用 IE 8 时没有出现警告消息框

console.log 仅可用于 firebug 作为独立调试器，这是您在使用 IE8 时必须使用的。或将 WebKit 浏览器作为其检查器的一部分，包括 Chrome、Safari 和 Opera。你的代码在所有这些对我来说都很好。

所以@ryanOptini 如何打印出我的数组的内容以显示在一个对话框中，我认为这就是console.log 的用途。

【参考方案1】：

在 javascript 中将对象打印到控制台很简单。只需使用以下语法：

console.log( object );

或

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

下面是一种相对未知的方法，它将对象或数组作为表格打印到控制台：

console.table(对象);

我认为重要的是要说这种日志记录语句只在浏览器环境中有效。我将它与谷歌浏览器一起使用。您可以在开发者控制台中查看您的 console.log 调用的输出：通过右键单击网页中的任何元素并选择“检查”来打开它。选择选项卡“控制台”。

【讨论】：

console.table( object ) 是个好主意，谢谢

【参考方案2】：

console.log 不生成任何消息框。如果不添加 firebug 或类似的东西，我认为它在任何版本的 IE（或 Firefox）中都不可用。

但它在 Safari 和 Chrome 中可用。既然您提到了 Chrome，我将使用它作为我的示例。

您需要打开您的窗口及其对应的开发者窗口。您可以通过右键单击页面上的任何元素并选择“检查元素”来执行此操作。您的窗口将分为两部分，开发者部分位于底部。在这两个部分之间的划分是一个带有按钮的栏，最右边的按钮标有“控制台”。您需要单击它以切换到控制台选项卡。在 Windows 上的大多数浏览器中按 F12 可使用开发人员工具，在 macOS 上按 command + shift + I。

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

【讨论】：

您需要（安装和）激活 IE Developer Tools 调试器。只需转到网页进行调试，然后按 F12 按钮即可激活调试器。这定义了您在代码中使用的控制台。

@GuruM：这不会像在 FireFox 或 Chrome 中那样只写出对象而不是对象的内容。

@NeilKnight。提问者可以使用本页其他地方指定的技术进行查找。我只是在告诉他如何激活 IE 调试器。 Kris 没有提到如何在 IE 中打开调试器，所以只是填补了空白。

【参考方案3】：

将数组转储为字符串有两种潜在的简单解决方案。根据您使用的环境：

...现代浏览器使用 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 带有另外两个可选参数。第三个“空格”参数可以实现漂亮的打印：

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"
  
 ]
"

【讨论】：

我建议有人在未来的 Javascript 版本中修复它，并在默认情况下使对象自动转换为合理的字符串表示形式。可能没有人想看到 Object[Object]。

【参考方案4】：

我强烈推荐这个 sn-p 以确保意外留下的代码片段不会在客户端浏览器上失败：

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

而不是定义一个空函数，这个 sn-p 也是一个很好的起点，可以在需要时滚动您自己的控制台代理，即将这些信息转储到 .debug 容器中，显示警报（可能会得到很多）等等。 .

如果您确实使用 firefox+firebug，console.dir() 最适合转储数组输出，see here。

【参考方案5】：

console 对象在 Internet Explorer 8 或更高版本中可用，但前提是您通过按 F12 或通过菜单打开“开发者工具”窗口。 p>

即使在关闭 IE 之前再次关闭开发者工具窗口，它仍然可用。

Chorme 和 Opera 总是有一个可用的console，至少在当前版本中是这样。 Firefox 在使用 Firebug 时有一个console，但它也可能提供一个没有 Firebug 的。

在任何情况下，使用console 输出是可选的。以下是一些关于如何做到这一点的示例：

if (console) 
    console.log('Hello World!');


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

【讨论】：

我从未听说过这种方法，个人认为在调试一些代码时它有点不方便。当使用捆绑器时（比如 Angular 使用 Webpack 作为捆绑器），无论如何都会处理您的代码，并且所有日志语句都将被删除。

【参考方案6】：

Json 代表 JavaScript Object Notation，实际上所有的 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 的 cmets 的回应，而不是完全回应他原来的问题。

【参考方案7】：

似乎 Firebug 或您正在使用的任何调试器未正确初始化。当您尝试访问 console.log() 方法时，您确定 Firebug 已完全初始化吗？检查控制台选项卡（如果它设置为激活）。

另一种可能性是，您自己在代码中的任何位置覆盖控制台对象。

【讨论】：

我在 IE8 和谷歌浏览器中使用 cosole.log 我没有得到任何结果是我使用的浏览器中的一些设置。

@KDM - console.log 消息将出现在 IE 开发人员工具调试器中“脚本”选项卡的“控制台”右侧窗口中。您需要访问要调试的网页，按 F12 键激活调试器。选择“开始调试”，然后选择“脚本”选项卡。运行脚本以在“控制台”窗口中查看日志消息。