DevTools console打印的对象，展开之后与展开之前不一致问题

最新推荐文章于 2023-11-23 10:50:37 发布

nsd130

最新推荐文章于 2023-11-23 10:50:37 发布

阅读量2.7k

点赞数

文章标签： react console 引用类型 setState

本文链接：https://blog.csdn.net/nsd130/article/details/88286689

版权

在使用React设置state的时候，第一次遇到了打印一个对象，在console中展开之前与展开之后存在不一样的情况，在咨询了一些前辈之后才知道，问题的所在是因为，console打印的只是对象在初始时候的快照，等到setState之后，已经改变了对象的。所以问题的根源是两个：

1、react中setState是一个异步方法；

2、对象的引用不是复制，是指向同一个对象；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nsd130

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

探索Redux世界：深入了解单一数据源和不可变性

青轩桃李能几何，流光欺人忽蹉跎

07-17

Redux是一个用于JavaScript应用程序的可预测状态容器。它通过一种称为"单一数据源"的模式来管理应用程序的状态，并使用纯粹的函数来处理状态的变化。

浏览器打印对象的展开值与未展开值不一致

qq_44851493的博客

08-17

280

具体操作可能因浏览器而异，但通常情况下，浏览器会遍历对象的属性，并将它们的值以字符串形式拼接起来，形成一个类似于 JSON 格式的字符串。当您展开一个对象时，浏览器的展开操作实际上是对对象的遍历和序列化。在这个过程中，浏览器会将对象的属性名称和值都转换成字符串形式，并按照一定的格式进行排列和展示。保留第一个a未展开，展开第二个a，可以看到展开值与未展开时是一致的，此时如果对a所引用的值进行操作，那么展开值也会发生改变。我：在浏览器调试面板中打印一个对象，展开这个对象的时候，浏览器做了什么操作。

3 条评论您还未登录，请先登录后发表或查看评论

Js 控制台展开之前与展开之后数据不一致问题

a5252145的博客

08-17

2306

控制台展开之前与展开之后数据不一致问题解决：打印时克隆一份即可。 // underscore: https://underscorejs.net/ 我这里使用的是underscore插件 import u from 'underscore'; console.log(u.clone(rack_t));

js 控制台打印对象，对象点开后里面属性没值，展开后有值（object展开和收起值不一致）

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

10-08

5953

js 打印这个对象的语句执行的时候, 对象里面的确是有值的,但是当程序继续执行,下面的代码有对这个对象赋值的语句,所以chrome控制台显示,里面有值。打印时内存里的值已经变了，导致展开和收起不一致。因为 js对象赋值只是引用地址赋值过去了，还是指向同一个地址。所以 js想要拷贝一个 object需要深拷贝最简单的就是 json.stringfly方法示例： let obj={ name:"555", age:"15" }; console.log(ob

js赋值，浅拷贝，深拷贝的区别及手写--判断两个对象是否相等--打印属性与对象展开不一致问题

weixin_43190804的博客

12-31

1378

深拷贝和浅拷贝的区别？浅拷贝: 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。深拷贝: 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。浅拷贝方法： 1. JSON.parse(JSON.stringify()) ...........

react组件在render里面打印会打印两次的问题

weixin_49847397的博客

07-19

1844

react组件在render里面打印会打印两次的问题。

什么？console.log打印出的数据不对？

小陈的博客

11-17

2798

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

JavaScript 内存详解 & 分析指南

菜鸟小栈

01-13

2267

前言 JavaScript 诞生于 1995 年，最初被设计用于网页内的表单验证。这些年来 JavaScript 成长飞速，生态圈日益壮大，成为了最受程序员欢迎的开发语言之一。并且现在的 JavaScript 不再局限于网页端，已经扩展到了桌面端、移动端以及服务端。随着大前端时代的到来，使用 JavaScript 的开发者越来越多，但是许多开发者都只停留在“会用”这个层面，而对于这门语言并没有更多的了解。如果想要成为一名更好的 JavaScript 开发者，理解内存是一个不可忽略的关键点。 ????

IDEA2021.2安装与配置（持续更新）

m0_67390963的博客

07-30

612

首先新建一个模板组，方便后期管理然后配置自己的代码模板***@Author$START$*@Date*@Parms$parms$*/模拟效果，在方法上输入/**+Enter$END$变量来定义代码模板被加载后的光标位置，另外我看网上的博文，也有人用$START$，不区分大小写。困为我是在注释中使用不生效，所以我把$START$放在了上面。...

首次使用VUE搭建简单项目问题汇总

Zlantan的博客

07-01

261

* 以下内容为学习VUE全家桶时遇到的问题整理，学习中复现的网站为‘卖座电影’移动端，问题的顺序不是线性的，只是起思路整理和提醒的作用，许多具体问题还要配合文档观看。* 1. *跨域请求问题：* 跨域请求问题的解决方案主要有三种，JSONP、cors方法和服务代理（反向代理），目前JSONP使用较少，这里详细说一下cors方法和服务代理。 Cors方法：在服务端设置响应头”Access-Control-Allow-Origin:”这样所有人都可以向该服务器请求数据，通配符也可以替换成后端允许请求的域名。（当

console.log打印属性与对象展开不一致问题

weixin_43054446的博客

01-19

4606

最近帮助一个同学在调试问题的时候，console.log()的输出真的让我诧异了一把，因为它竟然会出现异步输出的情况，因而误导了我们的判断，找错了方向，耽误了很多时间，所以这里记录一下遇到的这个问题，加深印象。问题现象：正常输出：异常输出：我们可以发现，异常输出的时候，没展开的时候，显示的name值是Tom，点击箭头展开对象里的name则是Jack，而且，此时的输出值Jack执行语句，明显是在赋值语句obj.per.name = 'Jack'之...

js对象遍历输出顺序错乱的问题

weixin_30518397的博客

12-24

5548

一、js对象遍历顺序错乱的原因下边就来实践一下： var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsfd'}; Object.keys(obj) 输出：["3", "name", "age", "school", "class", "hobby"]；换一下对象顺序， var ...

React16中打印事件对象取不到值的现象及其原因分析

最新发布

weixin_53850394的博客

11-23

738

Inputplaceholder="请输入"}}/>以这段代码为例，当我们在输入框中输入值的时候，先后触发了这两句代码的执行。在执行第一个时，由于e是个对象，根据的机制，此时将得到该对象的引用；在执行第二个时，由于并不是对象，此时直接得到这个值。接着等到我们打开控制台时，由于此时的事件对象e已经被事件对象池回收了，因此打印出的第一项e中的各个成员信息都是空的，而第二项中的并不是对象，因此能直接打印出它的值。

关于浏览器打印的一个疑问得到了解决(点击展开前和展开后显示不一样)

parade岁月的博客

04-11

702

chrome一个神奇的打印

js控制台打印对象时，属性显示有值，进一步打印属性为空

2³

10-08

3675

控制台在打印对象时，会出现打印值和实际值不一样，或者对象展开和折叠时值不同等情况

console.log()打印的数据和展开数据不同

a812901456的博客

12-19

1212

console.log()打印的数据和展开数据不同

JavaScript输出顺序问题及解决方案

BgScratch的博客

10-01

164

然而，由于JavaScript的异步执行特性，有时候会遇到输出顺序不符合我们预期的问题。异步操作不会阻塞代码的执行，因此在异步操作完成之前，后续的代码会继续执行。因此，输出的顺序将是"Start"，“Microtask”，“End”，“Async operation”。然而，由于异步操作的延迟，"End"会在"Async operation"之前输出。这样修改后，"End"将在"Async operation"之后输出，保持了预期的顺序。关键字，我们可以确保"End"在异步操作完成后输出。

console.log打印对象展开后都是同一个值

yohoj的博客

11-22

2455

打印aaaa的时候出现如下情况在 console.log 执行的时候，chrome 会对 log 的对象求一次值，打印出来是 Object ，可以继续展开的。但当你展开控制台中的 Object 的时候，chrome 又会对它求一次值，这一次是显示它的属性。所以才会有前后打印的东西不一样的情况发生，因为对象引用的实体的值改变了。如果把 console.log(a) 改为 console.log...