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

Question

我尝试使用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所做的）。 我怎么做？

Answer 1

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

…现代浏览器使用 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"
  }
 ]
}"

Answer 2

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

console.log( object );

要么

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

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

控制台表（对象）；

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

Answer 3

console.log不会产生任何消息框。 我不认为它在任何版本的 IE（或 Firefox）中都不可用，除非添加 firebug 或一些等效的东西。

但是它在 Safari 和 Chrome 中可用。 既然你提到了 Chrome，我将在我的例子中使用它。

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

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

Answer 4

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

Answer 5

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

/* 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()最适合转储数组输出，请参见此处。

Answer 6

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

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

Answer 7

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 的评论的回应，而不是完全回应他的原始问题。