Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Copy of the original type

🎨 e.g.

To copy a string, simply assign the value with an equal sign

Phrase let message = "Hello!" ; let phrase = message;Copy the code

The content of both variables is “Hello!” , but they are independent (that is, changes do not affect each other)

🍒 analogy

If the variable message is a box, “Hello!” Is the contents of the box;

The new variable phrase is a copy of the message box and its contents.

Object copy

If you copy an object as directly assigned above

🎨 e.g.

let user = { name: "John" };
let admin = user; 
Copy the code

You’ll notice when you modify

admin.name = 'Pete'; // Change the object console.log(user.name) for "admin"; // The object for 'user' has also been modifiedCopy the code

Why is that?

📖 because

A variable that assigns an object does not store the object itself, but the object’s “in-memory address,” in other words, a “reference” to the object. When an object variable is copied — the reference is copied, and the object is not copied.

🍎 analogy

{name: “John”} is stored somewhere in memory.

The variables user and admin hold “references” to them.

When we perform an operation on an object, such as getting a property user.name, the JavaScript engine searches for that address and performs the operation on the actual object. [Every time, I searched for files in the corresponding folder according to the address on the paper and processed the corresponding files]

Implement a copy of an object

What if we want to copy an object instead of just a reference to it?

Shallow copy

let user = { name: "John", age: 30 }; Way / * * * * * * * a * * * * * * * / let cloneUser1 = Object. The assign ({}, user); /******* mode 2 *******/ let cloneUser2 = {}; For (let key in user) {cloneUser2[key] = user[key]; cloneUser2[key] = user[key]; }Copy the code

Deep copy

This assumes that all attributes of user are primitive types. But attributes can be references to other objects. If the value is an object, then its structure is also copied. This is called “deep copy”.

🎨 e.g.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};
Copy the code

This structure does not work in the same way as the above, because it actually assigns the = sign to each property of the object. If the property contains nested objects, then we have the same problem as above.

You can do it recursively. Or use an off-the-shelf implementation, such as _.clonedeep (obj) in the JavaScript library LoDash.


1. Object References and Copying

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 JavaScript deep copy and shallow copy this article is enough

👉 Mini-program custom Component super full utility guide

👉 How does web development security defend against various attacks

👉 Product, technology, design and other areas of the Internet “basic terms” literacy