在console.log()中记录的对象和数组是什么?
您是否曾经使用过,console.log(myObject)
并且对扩展打印到控制台后的结果感到困惑?
例如:
const myObject = {
firstName: "Elad",
lastName: "Tzemach",
favoriteFood: "cake"
};
console.log(myObject);
// lots of other code
myObject.favoriteFood = "broccoli";
将在控制台中为我们提供此功能:
好极了!love我爱蛋糕!🍰
让我们扩展一下:
什么??😳 "broccoli"
?发生了什么??
看到那个蓝色的小图标“ i”吗?
如果将鼠标悬停在它上面,将会看到一个工具提示,提示“下面的值刚刚被评估”。
用console.log()求值
评估对象(或数组)的使用console.log()
是通过异步方式完成的:对对象本身的引用是console
同步传递给的,这就是为什么favoriteFood: "cake"
在扩展对象之前我们最初会看到对象的原因-因为这就是对象的“外观”在我们将其记录到控制台时。
但是,如果该对象后来被修改过,然后我们在控制台中对其进行了扩展,那么它将被评估为等于现在(在应用程序代码运行完之后),因此显示的数据将具有更新的值。
该怎么办?
为避免混淆,一种方法是使用:
console.log("users", JSON.stringify(users, null, 2));
然后,我们将在调用时获取该对象,console.log()
默认情况下将其展开:(尽管我们无法将其折叠)
另一个是简单地深克隆对象,然后将其记录下来:
console.log({...myObject});
(如果您没有嵌套的对象,则由散布运算符轻松完成。如果有,则必须使用第三方库,例如Lodash
或ImmutableJS
)
结论
了解console.log()
对象和数组的工作方式绝对可以使您免于沮丧!
如果你做到了,直到最后,我都会坦白:我也喜欢西兰花。
编码愉快!!🚀
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 在console.log()中记录的对象和数组是什么?
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 在console.log()中记录的对象和数组是什么?
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。