海贼王为什么画风突变

by Boris Sever

通过鲍里斯·塞弗(Boris Sever)

突变对象时控制台中会记录什么 (What gets logged in the console when you’re mutating objects)

A lot of developers are not using a debugger while developing. Instead they are relying on their old friend console.log().

许多开发人员在开发时都没有使用调试器。 相反，他们依靠自己的老朋友console.log() 。

It is important to note that the console shows the object’s value which is evaluated at the time of the first expansion in the console.

重要的是要注意，控制台显示对象的值，该值是在控制台中第一次扩展时评估的。

First, let me clarify what I mean by expansion. When we console.log an object (which covers arrays also), the object’s value is collapsed. For example:

首先，让我澄清一下扩展的含义。 当我们console.log一个对象(也包括数组)时，该对象的值被折叠。 例如：

console.log( "users: ", [{name: "John"}]);

console.log( "users: ", [{name: "John"}]);

The browser’s console will look like this:

浏览器的控制台将如下所示：

Then, when you click on the triangle, the object expands. At that exact time, the object’s value is evaluated and displayed.

然后，当您单击三角形时，对象将展开。 在该确切时间，将评估并显示对象的值。

Let's dive more into this and check out an example:

让我们进一步研究它，并查看一个示例：

On line 1 we are initializing a new users variable, which is an array of objects.

在第1行上，我们正在初始化一个新的users变量，它是一个对象数组。

On line 6 we are writing the value of the users variable to the console.

在第6行，我们将users变量的值写入控制台。

Next, we iterate through users, check if the user is valid, and depending on the return, we disable the user. For the sake of argument, let's assume the validateUser()returns false and code on line 10 is executed.

接下来，我们遍历users ，检查用户是否有效，并根据返回值禁用用户。 为了论证，我们假设validateUser()返回false并且执行了第10行的代码。

Even though map is creating a new array, changing the user object is also changing the user object in the users array. It changes because it has the same reference. (For a better explanation of what’s happening, check out this article ).

即使map正在创建新数组，更改user对象也将更改users数组中的user对象。 之所以更改，是因为它具有相同的参考。 (有关发生了什么的更好的解释，请查看本文 )。

The question is: what will be shown in the console which is called on line 6?

问题是：在第6行调用的控制台中将显示什么？

When we open this example in Chrome and Firefox, the object is collapsed. Then upon expansion, we see the values:

当我们在Chrome和Firefox中打开此示例时，该对象将折叠。 然后在扩展时，我们看到以下值：

Enabled is set to false, even though the value was true at the time of the output. The reason behind this is that the object’s value is evaluated the first time when we click to expand the object (lazy read).

即使在输出时该值为true ，也将Enabled设置为false 。 其背后的原因是，当我们单击以展开对象时(第一次读取)，该对象的值被第一次评估。

Note: Chrome will show an info icon which states: “Value below was evaluated just now.”

注意：Chrome会显示一个信息图标，其中指出：“下面的值刚刚被评估。”

Let’s now take a look at Safari:

现在让我们看一下Safari：

Hm, enabled is set to true. So we can see that there are some inconsistencies between browsers. Safari will try to expand the object automatically. If the object/array is too big, it will collapse and behave the same way as Chrome and Firefox.

启用的Hm设置为true。 因此，我们可以看到浏览器之间存在一些不一致之处。 Safari将尝试自动扩展对象。 如果对象/数组太大，它将崩溃，并且行为与Chrome和Firefox相同。

One way to get around this is to use JSON.stringify(), e.g. console.log("users", JSON.stringify(users, null, 2));

解决此问题的一种方法是使用JSON.stringify(),例如console.log("users", JSON.stringify(users, null, 2));

which will produce the following output to the console:

它将向控制台产生以下输出：

Unfortunately, with this approach you cannot expand/collapse an object. The value won’t be mutated.

不幸的是，使用这种方法无法扩展/折叠对象。 该值不会被突变。

I’m a big fan of the functional programming paradigm and immutable variables. To modify the object, you create a clone which is then modified. In that case you would not experience this kind of a “problem”. So we could write something like this:

我非常喜欢函数式编程范例和不可变变量。 要修改对象，请创建一个克隆，然后对其进行修改。 在那种情况下，您将不会遇到这种“问题”。 所以我们可以这样写：

In map function, we now clone the user object which we modify and return.

在map函数中，我们现在克隆了我们修改并返回的用户对象。

In case you stick with object mutation, Zoran Jambor added another clever solution:console.log("users", ...users);So the users array is destructed and a list of objects is shown in the console:

如果您坚持使用对象突变，则Zoran Jambor添加了另一个巧妙的解决方案： console.log("users", ...users); 因此，用户数组被破坏，并且控制台中显示了对象列表：

But here we also have to be careful. If the object’s value has been mutated, the console output will change on expansion:

但是在这里我们也必须要小心。 如果对象的值已被更改，则控制台输出将在扩展时更改：

In case you want to be absolutely sure that the object, which was logged, has the same value as it had during the console.log, you will need to make a deep clone of it. For example, we could use the following helper function instead of writing to the console directly:

如果您要绝对确定已记录的对象具有与console.log相同的值，则需要对其进行深层克隆。 例如，我们可以使用以下帮助程序函数，而不是直接写入控制台：

On line 3 we are actually creating a deep clone of the object, which gives the following output:

在第3行上，我们实际上是在创建对象的深层克隆，该克隆给出以下输出：

Now the object’s value is not changed on expansion.

现在，对象的值在扩展时不会更改。

If you use a debugger, adding a breakpoint to line 6 will pause the execution. You’ll see the current object’s value. If you prefer the console most of the time, be aware that the object/array is evaluated on the first expansion.

如果使用调试器，则在第6行添加断点将暂停执行。 您将看到当前对象的值。 如果您大部分时间都喜欢使用控制台，请注意，对象/数组是在第一个扩展上评估的。

Check out this great article on how to use your browser’s debugger.

查看有关如何使用浏览器调试器的精彩文章 。

Thank you for reading. Please share it with anyone who might find it useful and leave feedback. (This is my first story on Medium, and I would like to continue writing and get better at it).

感谢您的阅读。 请与可能有用的任何人分享并留下反馈。 (这是我在Medium上的第一个故事，我想继续写下去，并做得更好)。

翻译自: https://www.freecodecamp.org/news/mutating-objects-what-will-be-logged-in-the-console-ffb24e241e07/

海贼王为什么画风突变