两次console.log打印值不同

最新推荐文章于 2024-03-22 21:42:58 发布

转载最新推荐文章于 2024-03-22 21:42:58 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zjx304/p/9783339.html

本文深入解析Chrome控制台的使用技巧，包括数组修改后的实时显示原理，console.log的占位符用法，信息分组及对象属性展示方法。通过实例演示，帮助读者掌握控制台的高级操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1         var a=[1,2,3]
 2         console.log(a);
 3         a[2]=10;
 4         console.log(a);
 5         // 打印结果
 6         // (3) [1, 2, 3]
 7         // (3) [1, 2, 10]
 8 
 9         // 点击小箭头展开
10         // (3) [1, 2, 3]
11         // 0: 1
12         // 1: 2
13         // 2: 10
14         // length: 3
15         // __proto__: Array(0)
16 
17         // (3) [1, 2, 10]
18         // 0: 1
19         // 1: 2
20         // 2: 10
21         // length: 
22         // 3__proto__: Array(0)

因为当你在Chrome Console点击展开数组时，会重新去读一遍内存真实的值然后显示，一但展开后就不会再变。

chrome的console打印对象的时候，查看值是点击展开时再详细获取的，整个流程：

空对象声明
执行console，chrome打印对象，传递的是对象的引用
FileReader完成，赋值data给对象
你在console中，点击展开值，通过对象引用，获取到对象的详细值

你可以看到截图Object {} [i]这里有个[i]的图标，有对应的对象console说明:value below was evaluated just now

console的其他用法

1.console.log占位符

console.log("%d年%d月%d日",2011,3,26);

打印结果为2011年3月26日

2.console.group 信息分组

    //组之间嵌套 group1包含group2
    console.group('group1')
    console.log('member1')
    console.log('member2')  
    console.group('group2')
    console.log('member3')
    console.log('member4')
    
    //添加end 组1与组2并列
    console.group("第一组信息");    　　　　
    console.log('member1')
    console.log('member2')
    console.groupEnd();
    console.group("第二组信息");
    console.log('member3')
    console.log('member4')
    console.groupEnd();