在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()对象和数组的工作方式绝对可以使您免于沮丧！

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

编码愉快！！🚀