1.使用console.log()输出 对象 信息时,会有诡异的结果
//在控制台查看直接显示的是我们预期的 { index: 1};
// 但是当在控制台展开这个对象查看具体的信息时,发现 index:2(不是我们预期的)
let obj = { index: 1};
console.log(obj);
obj.index++;
//碰到数组这样的对象时,控制台上有时不得不展开去看,这时诡异效果更明显
let arr = [{ name: 'bwf' }]
console.log('改变之前', arr) //展开去看居然是 [{ name: 'wmy' }], 不是我们想要的[{ name: 'bwf' }],完全不符合js常识
arr[0].name = 'wmy';
console.log('改变之后', arr) // [{ name: 'wmy' }],
2.使用console.log()输出 对象 信息时,会有诡异的结果, 原因分析
不展开对象看时,console.log()是按照代码执行顺序,同步地输出了对象当时的快照。所以我们看到的是预期的值。 展开对象时,它其实是重新去内存中读取对象改变后的属性值,所以展开对象后,可能看到的不是预期值了。
3. 如何避免console.log()输出 对象 信息时出现的误导结果
3.1 简单数据类型打印不会有误导现象;若对象在打印之后,它里面的属性没有被改变也不会有误导现象。所以不用额外处理,正常打印即可。以下解决方法为非这两种情况。
3.2 对于Object等引用类型来说,先将对象序列化JSON.stringify()为字符串再输出
let obj = { index: 1 };
console.log(JSON.stringify(obj)); // {"index":1}
obj.index++;
let arr = [{ name: 'bwf' }]
console.log('改变之前', JSON.stringify(arr)) // [{ name: 'bwf' }]
arr[0].name = 'wmy';
console.log('改变之后', arr) // [{ name: 'wmy' }]