只会javascript_Javascript怪癖会吸引您

只会javascript

by William Woodhead

威廉伍德黑德(William Woodhead)

Javascript怪癖会吸引您 (A Javascript quirk that will catch you out)

This piece describes a feature that good Javascript developers should know. And once you have read this piece, you can pretend you have known about it for ages like me.

本文描述了优秀的Javascript开发人员应了解的功能。 而且，一旦您阅读了这篇文章，您就可以假装自己像我这样的年龄已经知道了。

Note: If you are not a Javascript developer, this might be a little tricky to get your teeth into. If you are, then buckle up for an extremely short ride.

注意：如果您不是Java语言开发人员，那么可能有些棘手。 如果您是，请系好安全带，以短途骑行。

It’s all to do with copying variables (or cloning, hence the sheep).

这全都与复制变量(或克隆，因此是绵羊)有关。

Let’s dive straight in.

让我们直接潜入。

复制字符串 (Copying strings)

Let’s do a quick bit of coding:

让我们做一下简单的编码：

var initialName = ‘William’;

var copyName = initialName;copyName = ‘Bill’;

console.log(initialName);   // prints ‘William’console.log(copyName);      // prints ‘Bill’

This all seems expected. We copy initialName and then change its value. initialName prints ‘William’ and copiedName prints ‘Bill’.

这一切似乎都在意料之中。 我们复制initialName ，然后更改其值。 initialName打印' William' ， copyedName打印' Bill' 。

So far so good. Let’s try the same exercise with objects instead of strings. (Expect the unexpected)

到目前为止，一切都很好。 让我们尝试使用对象而不是字符串进行相同的练习。 ( 期待意外 )

复制物件 (Copying Objects)

var initialObject = { name: ‘William’ };

var copyObject = initialObject;copyObject.name = ‘Bill’;

console.log(initialObject.name);   // prints ‘Bill’console.log(copyObject.name);      // prints ‘Bill’

Hmmm, here is the issue. When we print the name of initialObject, it has changed to Bill.

嗯，这是问题。 当我们打印initialObject的名称时，它已更改为Bill 。

So what has happened here?

那么这里发生了什么？

When we set the name in copyObject, it also changed the name in the initialObject. This is because objects are copied by reference. copyObject is just a reference to the underlying data.

当我们在copyObject中设置名称时，它也会更改initialObject中的名称 。 这是因为对象是通过引用复制的 。 copyObject只是对基础数据的引用。

So when we change the name in copyObject, it also changes the name in the initialObject because it is referencing the same bit of underlying data.

所以，当我们在copyObject更改名称 ，它也是在initialObject更改名字 ，因为它引用基础数据的同位。

你可能会被抓到的地方 (Where you might get caught out)

In large applications, this could result in parts of your data structures effectively being in multiple places at the same time.

在大型应用程序中，这可能导致部分数据结构有效地同时位于多个位置。

So if you alter an object in one part of your application code, you might be changing it elsewhere. This can sometimes cause undesired behaviour (like re-rendering) and may be difficult to debug and isolate.

因此，如果您在应用程序代码的一部分中更改对象，则可能会将其更改为其他位置。 有时这可能会导致不良行为(例如重新渲染)，并且可能难以调试和隔离。

Although this seems really simple, in complex web apps using popular frameworks, this simple base-level issue can cause severe headaches for developers.

尽管这看起来确实很简单，但是在使用流行框架的复杂Web应用程序中，这个简单的基本级别问题可能会使开发人员感到头疼。

Redux / React示例 (Redux/React example)

An example of where I have seen developers get caught by this again and again is in Redux action creators where you manipulate state before dispatching actions. By manipulating the object that is passed to the action creator without cloning it, you can actually change underlying state, or react component state before your dispatch.

在Redux动作创建者中，我一次又一次地看到开发人员被这种情况所吸引的一个例子是，您可以在调度动作之前操纵状态。 通过操纵传递给动作创建者的对象而不克隆它，您实际上可以更改基础状态，或在分派之前对组件状态做出React。

我们的解决方案 (Our solution)

There are many libraries that provide cloning functions for objects and arrays, for example, Lodash.

有许多库提供对象和数组的克隆功能，例如Lodash。

At pilcro we use Facebook’s Immutable.js to avoid this issue. Even though it is a large library, it enables our developers to write predictably functional javascript and avoid this pitfall. I couldn’t recommend it more.

在pilcro，我们使用Facebook的Immutable.js来避免此问题。 即使它是一个很大的库，它也使我们的开发人员可以编写可预测功能的javascript并避免这种陷阱。 我不能推荐它。

So there we have it, a very simple but important feature to know about in Javascript. If you aren’t a Javascript developer, kudos for getting to the end.

因此，我们有了它，这是Javascript中一个非常简单但重要的功能。 如果您不是Java语言开发人员，那么最后的荣誉。

If you are a senior Javascript developer and this was news to you, you should feel like this:

如果您是高级Javascript开发人员，而这对您来说是个新闻，那么您应该会感到：

If you liked this story, please ? and please share with others. Also please check out my company at pilcro.com. Pilcro helps startups stay brand-consistent across all their different marketing channels. You will love what we are up to!

如果您喜欢这个故事，请？ 并请与他人分享。 另外，请通过p ilcro.com查看我的公司。 Pilcro帮助初创公司在其所有不同的营销渠道中保持品牌一致性。 您将爱我们所做的一切！

翻译自: https://www.freecodecamp.org/news/a-javascript-quirk-that-will-catch-you-out-7895dfbae657/

只会javascript