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

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

console.log( object );

或

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

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

console.table(对象);

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

Answer 2

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

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

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

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

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

Answer 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。

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

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

Answer 7

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

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