Deep and shallow copy copy JavaScript

Deep copy and shallow copy is for reference types,

JS variable type is classified into type value (base type) and reference types;

Value types copy operation will copy values, and a reference to the type of assignment will be to copy the address , the final two variables point to the same data

 

First, take a look at the data type of the JS

X =. 1 the let;         // Number type of 
the let X = 0.1;      // Number Type, JS does not distinguish between integer and float values of 

the let X = "Hello World"; // constituted by a string of text within double quotation marks 
let x = ' JavaScript ';    // single quotes may be formed within the same text string 

the let X = to true ;     // Boolean Boolean 

the let X = null ; 
the let X = undefined;   // null and undefined very similar, is a special type

JS two types of data:

• Primitive data types
  • number 
  • string
  • boolean
  • null
  • undefined
• Object data types
  • type array array of special objects 
  • Special function object type function
  • Object object

There are undefined and null, not be discussed here

Object object need some attention:

• The object is variable, i.e., the value can be modified
• Comparison is not worth comparing

For example: var a = [], b = [];

　　   a == b; // false, only when the same reference (pointing to the same address), only two will equal

It can extend  deep copy and shallow copy problem.

=========================================================================

Our confusion:

1. looked equal, but unequal

 

 

 2. To vary, but equal

 

 

 Then the cause of this problem lie?

Reference> object 

> References will only address assignment, so

1. The different variables a and b, they have different addresses, even if the same data, itself, will not be equal, which is a cause of confusion;

2. The variables aa and bb point to the same address, when data changes that address, use that address all of the variables change all (the same data), which is the cause of confusion II

 

Not up to what we want, how to do it?

Second, the reference for assignments and comparisons (Object) data type of problem

Solution: awkward, is the only way, since the object data type is a basic data types, and the basic data types can be assigned normal, relatively, then we put the object type to become one of the basic types of operation

 

Method a: traverse the content object, a one assignment, so that only one copy of the embodiment is shallow copy

// 浅拷贝方法
function shallowClone(source) {
    let target = {};
    for(leti in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}

 

Method two: with respect to the shallow copy, one copy of the copy-level wireless called deep copy

// simple deep copy 
function clone (Source) { 
    the let target = {};
     for (the let I in Source) {
         IF (source.hasOwnProperty (I)) {
             IF ( typeof Source [I] === 'Object' ) { 
                target [I] = clone (Source [I]); // Analyzing still object, recursive 
            } the else { 
                target [I] = Source [I]; 
            } 
        } 
    } 
    return target; 
}

The difference between the above methods and shallowClone clone method is much recursion

But still some issues that need attention:

• Parameters need to be inspected
• Determine whether the object of logic is not stringent enough
• To consider the case of an array

Temporarily elaborate, this method can be determined objects:

// method is more rigorous determination target 
function isObject (X) {
     return Object.prototype.toString.call (X) === '[Object Object]' ; 
}

 

Of course, we can also refer to other methods or use plug-ins

For example: simple and crude JSON.parse (JSON.stringify (oldObj))

For example: ES6 assign the process (shallow copy)

For example: deep copy achieved by immutableJS

 

Third, and finally

Whether shallow copy or a deep copy will bring performance issues (for no reason needs to traverse, but re-assignment)

So we write the best subject of a lighter, more concise. . .

 

You can see this in detail:  https://yanhaijing.com/javascript/2018/10/10/clone-deep/