qidao123.com技术社区-IT企服评测·应用市场

标题: JavaScripts console.log和console.dir区别 [打印本页]

作者: 风雨同行 时间: 3 天前
标题: JavaScripts console.log和console.dir区别
console.log 和 console.dir 都是 JavaScript 中用于在浏览器控制台打印信息的方法，二者主要有以下区别：
输出内容和格式

console.log：主要用于输出简单的日志信息，直接打印数据的字符串表现。对于对象、数组等引用范例，在现代浏览器中通常会展开显示对象的属性，但本质是显示其字符串化后的内容。比如：

const person = { name: 'Alice', age: 30 };
console.log(person);
// 输出类似 {name: "Alice", age: 30} ，是对象的字符串表示形式

复制代码

它也支持多参数输出，会将多个参数连接起来显示，像 console.log('姓名：', person.name, '，年龄：', person.age); 。

console.dir：专门用于展示对象的结构，以树形结构的情势输出对象的所有属性和方法，方便深入查看对象内部细节。比方：

const person = { name: 'Alice', age: 30 };
console.dir(person);
// 会以更像文件目录树的交互列表形式展示对象的属性和方法，可展开查看详细内容

复制代码

不外它仅处置惩罚第一个参数，假如传入多个参数，只会显示第一个参数对象的结构。
对 DOM 元素的显示

console.log：显示 DOM 元素的 HTML 结构。比如 console.log(document.body); ，会展示 <body> 标签及其内部包含的 HTML 内容。
console.dir：显示 DOM 对象的属性。比方 console.dir(document.body); ，会列出 document.body 这个 DOM 对象所具有的各种属性，如 clientHeight、clientWidth 等。

交互性

console.log：输出的信息交互性有限，主要是展示信息，一般不能对输出内容举行进一步交互操作。
console.dir：输出的对象属性列表具有可展开性，能像操作文件目录树一样展开或收起属性，更便于查看和分析对象详细信息。

尺度性和兼容性

console.log：是尺度的控制台输出方法，被所有现代浏览器支持。
console.dir：属于非尺度特性，虽然在大多数现代浏览器中可用，但从规范角度不发起在生产环境中大量使用，不外在调试场景下使用较方便。

一般来说，假如只是快速查看变量值、简单输出信息，使用 console.log ；若要深入分析对象结构，特别是调试 DOM 对象属性时，console.dir 更合适。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)