Deep copy _javascript techniques for objects in JavaScript

The difference between a deep copy of an object and a shallow copy is as follows:

Shallow copy: Simply copy the object's reference, not the object itself;
Deep copy: Copies all the objects referenced by the copied object.

I. Implementation of a shallow copy

Shallow copy of the implementation method is relatively simple, as long as the use of simple copy of the statement can be.

1.1 Method One: Simple copy statement

/* ================ Shallow copy ================
/function Simpleclone (initalobj) {
var obj = {};
for (var i in initalobj) {
obj[i] = initalobj[i];
return
obj;
}

Client Calls

/* ================ client calls ================/var obj = {    a: "Hello",     b: {        a: "World",         b:    &NBSP},     c: ["Bob", "Tom", "Jenny"],     d:function () {        alert ("Hello World");    &nbsp} var cloneObj = Simpleclone (obj); Object Copy   Console.log (CLONEOBJ.B); {A: "World", b:21} console.log (CLONEOBJ.C); ["Bob", "Tom", "Jenny"] Console.log (CLONEOBJ.D);
function () {alert ("Hello World");}  //Modify the object after the copy CLONEOBJ.B.A = "Changed";
CLONEOBJ.C = [1, 2, 3];
CLONEOBJ.D = function () {alert ("changed");   Console.log (OBJ.B); {A: "Changed", b:21}///The object referenced by the original object was modified   Console.log (OBJ.C); ["Bob", "Tom", "Jenny"]//The object referenced by the original object has not been modified Console.log (OBJ.D); function () {alert ("Hello World");}//Functions referenced by the original object are notBe modified 

1.2 Method Two: Object.assign ()

The Object.assign () method copies the enumerable properties of any number of source objects themselves to the target object, and then returns the target object. But Object.assign () is a shallow copy of the object's properties, not the object itself.

var obj = {A: {a: "Hello", b:21}};
var initalobj = object.assign ({}, obj);
INITALOBJ.A.A = "Changed";
Console.log (OBJ.A.A);//"Changed"

Two. Implementation of deep copy

There are many ways to achieve deep copy, with the simplest json.parse () method, as well as the commonly used recursive copy method, and the Object.create () method in ES5.

2.1 Method One: Using the Json.parse () method

There are many ways to achieve deep copy, for example, the simplest way is to use Json.parse ():

/* ================ deep copy ================ *
/function Deepclone (initalobj) {
var obj = {};
try {
obj = Json.parse (json.stringify (initalobj));
return
obj;
}

/* ================ Client calls ================
/var obj = {
A: {
A: "World",
b:21
}
var cloneobj = deepclone (obj);
CLONEOBJ.A.A = "changed";
Console.log (OBJ.A.A);//"World"

This method is simple and easy to use.

But this method also has a lot of disadvantages, such as it will discard the constructor of the object. That is, after a deep copy, no matter what the original constructor of the object is, it becomes object after a deep copy.

The object that this method handles correctly is only number, String, Boolean, Array, flat object, which is the data structure that can be represented directly by JSON. RegExp objects are not able to be deeply copied in this way.

2.2 Method Two: recursive copy

The code is as follows:

/* ================ deep copy ================
/function Deepclone (initalobj, finalobj) {
var obj = finalobj | |    {};
for (var i in initalobj) {
if (typeof initalobj[i] = = ' object ') {
obj[i] = (initalobj[i].cons Tructor = = Array)?            [] : {};
Arguments.callee (Initalobj[i], obj[i]);
else {
Obj[i] = initalobj[i];
}
return
obj;
}

The code above does make deep copies. But when you encounter two objects that are referencing each other, a dead loop occurs.

In order to avoid the death cycle of objects that are referenced by each other, you should decide whether to refer to each other in the traversal, and then exit the loop.

The improved version of the code is as follows:

/* ================ deep copy ================/function Deepclone (initalobj, finalobj) {    var obj = f Inalobj | |
{};     for (var i in initalobj) {        var prop = InitalObj
[i];           //avoid referencing objects to cause dead loops, such as INITALOBJ.A = Initalobj          if (prop = = obj) {         
   continue;        &NBSP}           if ( typeof prop = = = ' object ') {            obj[i] = ( Prop.constructor = = Array)?
[] : {};
            arguments.callee (prop, Obj[i]);        &NBSP} else {              Obj[i] = prop;
        }     }     return obj; }

2.3 Method Three: Using the Object.create () method

Using the var newObj = Object.create (oldobj) directly, the effect of deep copy can be achieved.

/* ================ deep copy ================/function Deepclone (initalobj, finalobj) {    var obj = f Inalobj | |
{};     for (var i in initalobj) {        var prop = InitalObj
[i];           //avoid referencing objects to cause dead loops, such as INITALOBJ.A = Initalobj          if (prop = = obj) {         
   continue;        &NBSP}           if ( typeof prop = = = ' object ') {            obj[i] = ( Prop.constructor = = Array)?
[]: Object.create (prop);        &NBSP} else {         
   obj[i] = prop;         }    &nbSP;}
    return obj; }

Three. Reference: Implementation of Jquery.extend () method

Jquery.js's Jquery.extend () also implements a deep copy of the object. The official code is posted below for reference.

Official link address: https://github.com/jquery/jquery/blob/master/src/core.js.

Jquery.extend = JQuery.fn.extend = function () {    var options, name, SRC, copy, Copyisarray, clone,         target = arguments[0] | | {},         i = 1,         length =
Arguments.length,         deep = false;       //Handle A deep copy situation     if (typeof target = = "Boolean") {        deep = target;            //Skip The Boolean and the target         target = arguments[I] | |
{};
        i++;    &NBSP}       //Handle case when Target was a string or something (possible in Deep copy)     if (typeof target!== "Object" &&amP.!jquery.isfunction (target)) {        target = {};      &NBSP}       //Extend jQuery itself if only one argument is passed     if ( i = = length) {        target = this;       &
nbsp; i--; &NBSP;&NBSP;&NBSP;&NBSP}       for (; i < length; i++) {  &NBSP;&NBSP;&NBSP;&NBSP;&NB sp;   //only deal with non-null/undefined values         if (  (options = arguments[i])!= null) {              // 
Extend the Base Object             for (name in options) { &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;SRC = target[
Name];     &nbSp;           copy = options[name];                   // Prevent never-ending Loop                  if (target = = copy) {             
       continue;                 }                    //Recurse If we ' re Merging plain objects or arrays                  if (Deep && copy && jquery.isplainobject (copy) | |      &n Bsp;               (Copyisarray = Jquery.isarray (copy))) {  &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NB Sp;           if (Copyisarray) {                       
  copyisarray = false;                          clone = src && jquery.isarray (src)?
SRC: [];                     &NBSP;&NBSP;&NBSP} else {                         clone = src && jquery.isplainobject (src)?
src: {};                     }                        //Never Move original objects, clone them                      
target[name] = Jquery.extend (deep, clone, copy);                   //Don ' t Bring in undefined values                &NBSP;&NBSP} else if (copy!== undefined) {            
        target[name] = copy;                 }              }      &NBSP;&NBSP;&NBSP}    &nbsp}       //return the modified object   
  return Target; };

This article is mainly about the content of the deep copy of JS, other content can be viewed in the cloud-dwelling community before the post