console.log（变量）； VS console.log([变量]); / 一个提供信息，另一个不提供？

Question

在 Chrome 中，这给出了 HTML 标签：

var image = document.getElementsById('image');

console.log(image);

在Chrome中，这给出了各种信息，例如clientWidth等：

console.log([image]);

这是为什么？

Answer 1

console.log(image);

这会在您的文档中记录对 HTMLELement 的直接引用，显示实际的 <img> （或任何其他元素） 标签。

console.log([image]);

这里你传递一个 Array 作为参数，这将记录一个数组。该数组仅向您显示 HTMLElement.

的 Object

Answer 2

console.log 是一种挑剔的方法。它是根据浏览器团队的决定实施的，因为没有正式的规范（我最后检查过）。

在第一个 .log(image) Chrome.console 中，似乎运行 .toString （或等效）方法在您的 HTMLElement 上为您提供字符串输出。

在第二个 .log([image]) Chrome.console 中输出数组的内容作为索引 objects/primitives。它不会像 log 的第一级参数那样尝试处理数组的子项，因此它会为您提供实际的 HTMLElement 对象，而不是字符串输出。

console.log( variable ); VS console.log( [variable] ); / One gives info the other doesn't?