• ECMAScript variables may contain values of two different data types: base type values and reference type values.
  • Basic data types: Boolean, Null, Undefined, Number, String, Symbol
  • Reference data types: Object, Array, Function
  • Basic type values: these are simple data segments that are stored in stack memory, i.e. they are stored entirely in one location in memory.
  • Reference type values: objects that are stored in the heap, meaning that what is held in a variable is really just a pointer to another location in memory where objects are stored.
  • The concept of deep and shallow copies exists only for reference types
  • In simple terms
    • Shallow copy is when the source object and the copy object share the same entity, but the variable referenced is different (the name is different). Any change to one of these objects affects the other. For example, if a person’s first name is John doe, then they change their name to John Doe, but it’s still the same person, whether John doe is missing an arm or a leg, that person’s bad luck.
    • Deep copy means that the source object and the copy object are independent, and the changes of either object have no impact on the other object. For example, if a person named Joe is cloned (assuming the law allows it) into another person named Joe, it doesn’t matter whether Joe is missing an arm or a leg or Joe is missing an arm or a leg.
  • Another way to think about it is this

    • Shallow copy: A copy of a memory address so that the target object pointer and the source object point to the same memory space. Note: When memory is destroyed, Pointers to objects must be redefined before they can be used.

    • Deep copy: In the deep copy mode, the two memory addresses are independently allocated for the object content. After the copy is complete, the two objects store the same value but have different memory addresses. The pages of the two objects do not interfere with each other.

    • Shallow copy

      • var a = {x:1}
      • var b = a
      • console.log(b); //{x:1}
      • b.x = 2
      • console.log(b)//{x:2}
      • console.log(a)//{x:2}

    • Shallow copy is an address that assigns the value of A to B and also assigns the address of A to B. When b (a) changes, a (b) also changes

  • Deep copy
– Several methods of deep copy
1. Built-in JSON methods
  - var a={x:1}
  - var b=JSON.parse(JSON.stringfiy(a))
  - console.log(b)//{x:1}
  - b.x=2
  - console.log(b)//{x:2}
Copy the code
  • Json.stringify converts an object into a JSON string, and json.parse () parses the string into an object. In between, new objects are created, and the object creates a new stack for deep copy. If the object attribute is function, it will be removed automatically at build time because JSON strings do not support function.)
2, Object’s built-in assign method
- var a={x:1} - var b=Object.assign({}, a); - console.log(b); //{x:1} - b.x = 2; - console.log(b); //{x:2} - console.log(a); //{x:1} - This method uses object. assign to insert the contents of subsequent objects into the Object specified by the first parameter. This method does not modify the objects after the first parameter. Object nesting level is too deep, more than 2 levels, shallow copy conditions occur, such as echarts component option object)Copy the code
3, recursive implementation
- function extendDeepCopy(obj,newobj){ - var newobj=newobj||{}; - for (var I in obj) {- the if (typeof obj [I] = = 'object') {/ / sure type - newobj [I] = (obj [I] constructor = = = "Array")? [] : {}; - }else{ - newobj[i]=obj[i]; - } - } - return newobj; // End function to complete deep copy -}Copy the code