console.log()是打印对象时的问题

在浏览器控制台直接运行如下代码:
let p={name:'lisi',age:20};

console.log(p);

p.age=30;

预期的结果应该是打印的p里面name:'lisi',age:20,也正是如此:

但是点开p对象发现其中age是30

这是为什么呢?查找多篇资料后(https://segmentfault.com/q/1010000044315304),根据我的总结得出如下结论:

打印时直接打印快照,此时控制台对象没展开,其实内容都是对的,只是有可能没有显示。但当你第一次展开对象后,就会访问对象的堆地址上最新的数据内容(注意第二次等之后再点开始终无法起到相同的作用,因为后面有个蓝色的i标志,说明第一次 展开后此内容就始终记下来了)

更复杂的情况:
开源看到蓝色i标志只在最顶层打印的对象有,意味着当你第一次点开此对象后,所有对象中的连带内容都已经保存到快照中,之后再收起和点开都是这一个值

当使用 `console.log` 打印对象,可能会遇到不同问题,对应的处理方法如下: ### 解决异步打印问题 `console.log` 打印对象存在异步问题,当展开打印对象前,对象保持内存中的最新状态,若修改对象状态,打印内容会变为最新内容。为避免此问题,可在打印对象进行深拷贝。例如使用 `JSON.parse(JSON.stringify(obj))` 来复制对象: ```javascript let obj = { name: 'leesy', age: 15 }; let copiedObj = JSON.parse(JSON.stringify(obj)); console.log(copiedObj); obj.age = 150; // 此打印的 copiedObj 不受 obj 后续修改的影响 ``` ### 解决属性缺失问题 在编写代码用 `console.log()` 进行前端调试打印对象,可能出现属性缺失情况。比如定义一个 `cat` 对象,在函数中打印后又删除其属性。可在操作对象前先进行复制保存,避免原对象修改影响打印结果: ```javascript let cat = { name: 'Tom', age: 3, color: 'white', birthday: '2020-01-01' }; function test(obj) { let copiedObj = { ...obj }; console.log(copiedObj); delete obj.name; } test(cat); ``` ### 解决打印 “object Object” 问题JavaScript 或 TypeScript 中,若使用连接运算符(+)将对象转换为字符串,会调用对象的 `toString` 方法,返回 `[object Object]`。可直接使用 `console.log` 打印对象来查看详细内容: ```javascript let obj = { name: 'example', value: 10 }; // 错误做法 console.log('对象是:' + obj); // 正确做法 console.log(obj); ``` ### 优雅打印对象数组 使用 `JSON.stringify()` 的第三个参数可优雅打印数组对象。第三个参数可用于设置缩进,使打印结果更易读: ```javascript const options = [ { label: "数据库类型名称", prop: "cnName", value: "", type: "input", filterable: true, width: 150 } ]; console.log('before', options); console.log('after', JSON.stringify(options, null, 2)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值