console.log()控制台异步打印与对象展开后不一致问题

问题描述：

js 复制代码

console.log('baseData', baseData);
console.log('metrics', metrics);
normalizeMetricNulls(baseData, metrics);

上述代码中normalizeMetricNulls这个函数的作用是将bastData中属性值为null的字段修改为0，但是我发现我在这个函数的前面输出了baseData的值，其中的字段值已经是0，按理说还没有修改，应该是null，如下图所示：

解答：

我询问了AI，其给我的解答是：

❗️ Chrome 控制台对对象是按引用显示的（展开时会显示对象的"当前"状态），所以即便你在调用前用 console.log 打印了对象，之后如果对该对象做了修改（比如 normalizeMetricNulls），在控制台展开时会看到修改后的值（看起来像"先打印后修改也显示修改后"）。

同时我也得到了解决办法，快照打印，对对象立即序列化，避免引用问题：

js 复制代码

console.log('baseData snapshot', JSON.parse(JSON.stringify(baseData)));
console.log('metrics snapshot', JSON.parse(JSON.stringify(metrics)));
normalizeMetricNulls(baseData, metrics);

其实我这个例子不能说明什么展开前的值和展开后的值的区别，因为我的图片中在控制台展开前的值显示的是省略号，所以我在网上搜到相关的更直白的例子：

（图中riskId展开前后的值不一致！）

❗️ 另一种解决办法就是调试对象的时候，使用debugger来调试效果更好。

参考文章：
前端 - 这个情况是因为什么？控制台输出的对象，在展开和折叠时数据不对等？

什么？console.log打印出的数据竟然不对？都怪我年轻不懂事，调试代码只会用console.log。

附录：

我还尝试了赋值和浅拷贝之后进行打印：

js 复制代码

//赋值
let b = baseData,m = metrics;
console.log('baseData snapshot', b);
console.log('metrics snapshot', m);
//浅拷贝
let b = Object.assign([], baseData), m = Object.assign([], metrics);
console.log('baseData snapshot', b);
console.log('metrics snapshot', m);

以上两种方法都以失败告终，究其原因：

赋值依然引用的同一个对象。
浅拷贝则是当对象只有一级属性为深拷贝；当对象中有多级属性时，二级属性后就是浅拷贝。

赋值，深浅拷贝问题可参考：全排列-遇到的深浅拷贝问题