学无先后,达者为师

网站首页 编程语言 正文

console.log打印object值不对

作者:番茄不爱 更新时间: 2022-01-05 编程语言

debug时遇到一个问题:
console.log(object); 和 console.log(JSON.stringfy(object));打印出的值不一致,导致debug的时候以为是console.log这个动作之前获取到的object数据就不对,浪费了些时间在debug获取数据部分,而实际上问题出在console.log动作之后。因为:
console.log打印对象的执行机制是,当你在浏览器控制台点击object,展开object时,此时浏览器才会去object所在的堆内存中获取数据,再经过浏览器编译,展示在控制台。
控制台object一旦打开后,就不再修改,其值就会存储在浏览器中,即使后面代码再次更新object,也不会改变了。

做个测试:

//定义object: this.orginData
this.orginData = {
	 a: '111',
	 b: '222',
};
console.log("object orginData==", this.orginData);
console.log("object orginData a==", this.orginData.a);
console.log("json orginData==", JSON.stringify(this.orginData));
console.log("json orginData a==", JSON.stringify(this.orginData.a));

//修改object中a的值,设为空
this.orginData.a = "";
console.log("object orginData==", this.orginData);
console.log("object orginData a==", this.orginData.a);
console.log("json orginData==", JSON.stringify(this.orginData));
console.log("json orginData a==", JSON.stringify(this.orginData.a));


编译后在浏览器控制台打印的信息如下,可以看到,用JSON.stringfy()打印出的数据可以直接显示出数据,而object则显示成折叠状态:
在这里插入图片描述
此时,把两个折叠的object数据打开,如下图所示,可以看到,不论是修改object值前还是后,打印出来的两个object的数据是一样的,a值都为空:
在这里插入图片描述
分析如下:
我们认为object修改之前和之后打印的结果应该和用JSON.stringfy()打印结果一样有所不同,但根据测试结果,前后打印的object结果却相同。说明在浏览器打印对象时,并没有直接调用对象所对应的堆内存中的值,而是先打印了一个由浏览器自己解析的代表这个对象的字符串。当我们在控制台点击展开这个对象时,浏览器才会去根据这个对象的引用地址去堆内存中获取对象的具体数据展示出来。所以获取到的object值已经是页面跑完后,最后的值。

如果要在浏览器控制台打印代码执行时堆内存所存储的该对象的具体数据,可以用JSON.stringfy(object),将object对象转变成json字符串,也可以用JSON.parse(JSON.stringfy(object))来打印,JSON.parse()可以将数据再转换为 JavaScript 对象,当object对象的数据量很大的时候,用后者在浏览器控制台的输出会更加美观,而不是一堆很长的字符串。

原文链接:https://blog.csdn.net/weixin_43894460/article/details/122099275

栏目分类
最近更新