在console.log()中记录的对象和数组是什么?

作者 : IT 大叔 本文共828个字,预计阅读时间需要3分钟 发布时间: 2020-09-14

您是否曾经使用过,console.log(myObject)并且对扩展打印到控制台后的结果感到困惑?

例如:

    const myObject = {
      firstName: "Elad",
      lastName: "Tzemach",
      favoriteFood: "cake"
    };

    console.log(myObject);

    // lots of other code

    myObject.favoriteFood = "broccoli";

将在控制台中为我们提供此功能:

在console.log()中记录的对象和数组是什么?插图

好极了!love我爱蛋糕!🍰

让我们扩展一下:

在console.log()中记录的对象和数组是什么?插图(2)

什么??😳 "broccoli"?发生了什么??

看到那个蓝色的小图标“ i”吗?

在console.log()中记录的对象和数组是什么?插图(4)

如果将鼠标悬停在它上面,将会看到一个工具提示,提示“下面的值刚刚被评估”。

用console.log()求值

评估对象(或数组)的使用console.log()是通过异步方式完成的:对对象本身的引用是console同步传递给的,这就是为什么favoriteFood: "cake"在扩展对象之前我们最初会看到对象的原因-因为这就是对象的“外观”在我们将其记录到控制台时。

但是,如果该对象后来被修改过,然后我们在控制台中对其进行了扩展,那么它将被评估为等于现在(在应用程序代码运行完之后),因此显示的数据将具有更新的值。

该怎么办?

为避免混淆,一种方法是使用:

console.log("users", JSON.stringify(users, null, 2));

然后,我们将在调用时获取该对象,console.log()默认情况下将其展开:(尽管我们无法将其折叠)

在console.log()中记录的对象和数组是什么?插图(6)

另一个是简单地深克隆对象,然后将其记录下来:

console.log({...myObject});

(如果您没有嵌套的对象,则由散布运算符轻松完成。如果有,则必须使用第三方库,例如LodashImmutableJS

结论

了解console.log()对象和数组的工作方式绝对可以使您免于沮丧!

如果你做到了,直到最后,我都会坦白:我也喜欢西兰花。

编码愉快!!🚀

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 在console.log()中记录的对象和数组是什么?

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论