Home javascript Copying an object with a subsequent change

Copying an object with a subsequent change [duplicate]

Author

Date

Category

Tell me how to make a copy of the object that I can change and at the same time these changes will not touch the original?
Here for example, I use the object:

var original = {somenumber: 1,
     Somezero: 0,
     OPETS: {Tishka: 1,
         Sharik: 1}
     }
var copy = original; // Make a copy (and how I suspect I make a bundle with each other)
Copy.opets.sharik = "Doggy";
// Copy.opets.sharik === "Doggy" // True
// Original.opets.sharik === "Doggy" // True

Answer 1, Authority 100%

To begin with, it is worth noting that all objects in JS are assigned and indulge in on the link . This means that making:

var copy = original;

You actually place link on Original in the variable Copy .

Depending on the additional conditions, there are several options for solving object cloning in JavaScript.

  1. If you need Surface Copy (one nesting level) object, you can use ES6 object.assign :

    var copy = object.assign ({}, original);
    
  2. If you do not plan to use structures, like for in and object.prototype.hasownProperty on copies, you can specify the original as prototype Copies. This is done like this:

    var copy = object.create (original);
    

    Unfortunately, this method also creates only the surface copy of the object, but allows you to save some memory on properties that will not be redefined.

  3. If your source object may be painlessly serialized in JSON (does not contain functions, complex objects, like DATE and cyclic references), then you can use hack with deserialization serialization:

    var copy = json.parse (json.stringify (original);
    
  4. If the use of third-party libraries is permissible, you can use existing implementations of deep copying. In Lodash , for example, there is a _. CloneDeep :

    var copy = _.clonedeep (original);
    

    Similar methods are in many libraries. For example, in jQuery there is a jQuery.Extend :

    // The first argument indicates the depth of copying
    var copy = jquery.extend (true, {}, original);
    

    You should check the documentation for the libraries used, maybe there is your own method for deep copying.

  5. If none of the methods approached above, you will have to implement your own option of deep copying. How to make it effectively better to look in the source code of one of the existing deep copy libraries.


Answer 2, Authority 8%

If jquery

is used

var original = {a: 1, b: {C: 3}}
var cloned = {};
jquery.extend (true, cloned, original);
cloned.b.c = 10;
Console.log (Original);

If not – we look at popular articles on Bourgeois SO
https://stackoverflow.com/questions/728360/how-d I-Correctly-Clone-A-JavaScript-Object


Answer 3

var original = {
   SOMENUMBER: 1,
   Somezero: 0,
   OPETS: {Tishka: 1, Sharik: 1}
}
var copy = json.parse (JSON.Stringify (Original));
Copy.opets.sharik = "Doggy";
console.log (original.opets.sharik); // 1
Console.log (Copy.opets.sharik); // Doggy.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions