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

hwazgwia  于 2023-10-14  发布在  Java
关注(0)|答案(7)|浏览(155)

我尝试使用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就是这样做的)。我该怎么做呢?

db2dz4w8

db2dz4w81#

有两种可能的简单解决方案将数组转储为字符串。根据您使用的环境:
...现代浏览器使用JSON:

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

console.info…with something like node.js you can use

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

编辑:

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

bcs8qyzn2#

在JavaScript中打印一个对象到控制台很简单。只需使用以下语法:

console.log( object );

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

下面是一个相对未知的方法,它将对象或数组作为表打印到控制台:
console.table(object);
我认为重要的是要说这种日志记录语句在浏览器环境中工作。我用的是Google Chrome。您可以在Developer Console中查看console.log调用的输出:通过右键单击网页中的任何元素并选择“检查”来打开它。选择选项卡“控制台”。
这些语句也可以在NodeJS环境中工作。然后输出默认为std out。这是例如。NodeJS进程运行的终端。
NodeJS console.log调用不会打印完整的对象树。相反,子对象被打印为[Object object]。要在输出中看到完整的对象,你必须像这样使用util.inspect:

console.log(util.inspect(object, true, 10))
mqkwyuun

mqkwyuun3#

console.log不生成任何消息框。我不认为它可以在任何版本的IE(也不是Firefox)没有添加Firebug或一些等效的。
但它在Safari和Chrome中可用。既然你提到了Chrome,我就用它来做例子。
你需要打开你的窗口和它的开发者窗口。您可以通过右键单击页面上的任何元素并选择“检查元素”来执行此操作。你的窗口将被分成两部分,开发人员部分是底部。在这两个部分之间的划分是一个带有按钮的栏,最右边的按钮被标记为“控制台”。您需要单击该选项卡以切换到控制台选项卡。在Windows上的大多数浏览器中按F12可获得开发人员工具,在macOS上按command + shift + I。
一旦到了那里,你就可以通过控制台的JavaScript与加载在顶部的任何页面进行交互,任何你console.log的消息都会显示在那里。

4xrmg8kj

4xrmg8kj4#

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

wswtfjt75#

看起来像Firebug或任何你正在使用的编译器,没有正确初始化。当你尝试访问console.log()方法时,你确定Firebug已经完全初始化了吗?检查控制台选项卡(如果已设置为激活)。
另一种可能性是,您可以在代码中的任何地方覆盖console-Object。

laximzn5

laximzn56#

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.

edit:任何你想成为字符串但目前还不是的东西(JavaScript很少把几乎所有东西都当作字符串)只需使用内置的toString()函数。所以如果你需要上面的行,它将是filter.dvals.valueToDisplay.toString();
第二次编辑以澄清:这个回答是对OP评论的回应,而不是完全回答他原来的问题。

g0czyy6m

g0czyy6m7#

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

/* 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()最适合转储数组输出,see here

相关问题