console.log()与console.dir()的区别及说明
本文解析JavaScript中console.log与console.dir的核心区别。console.log直接输出消息,而console.dir以文件树样式展示对象所有属性,特别适合查看DOM节点。文章通过示例代码演示了数组在控制台展开时的动态变化现象,并指出console.dir虽非标准但实用,建议生产环境谨慎使用。
console.log()与console.dir()的区别
1、console.log()
首先,其主要功能是将一条消息输出到Web控制台。
其次,具体显示的内容取决于传递的实际参数,控制台会直接呈现该参数的结果。
2、console.dir(object)
首先,它的主要作用是在控制台中显示指定JavaScript对象的属性,并以类似文件树结构的交互列表形式呈现。
其次,它通常用于打印出该对象的所有属性及其对应的值。
第三,该方法对于输出DOM对象非常有用,因为它会显示DOM对象的所有属性,特别是在输出节点属性和属性值时,推荐使用此方法。
第四,需要注意的是,该特性是非标准的,建议尽量避免在生产环境中使用(使用console.log()更为稳妥)。
console.log与console.dir发现的问题
如下代码:
<body>
<h1 class="text-center"></h1>
<div class='wrap'>
</div>
<script type="text/javascript">
var arr = ['a', 'b'];
console.log(arr);
function a() {
arr[0] = arr[1];
arr[1] = 'c';
}
;
$(document).ready(function () {
a();
console.dir(arr);
});
</script>
</body>注意第一行,看到的是['a', 'b'];这是符合预期的。

但是等一等,点看三角看一下,怎么变成了['b','c'],这是什么意思?

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
