preface

In the actual project development, there will be shallow copy and deep copy questions, which are often asked in the interview, so make a note to summarize the relevant knowledge points.Copy the code

Assignment, shallow copy, deep copy

The data type

Let’s review data types first:

Basic data types (primitive types) : String, Number, Boolean, Undefined, Null, Symbol Basic data types: data stored directly on the stackCopy the code
Reference data types: Object, function, and array Reference data types store the reference (pointer) of the object in the stack. The real data is stored in the heap memory. When the interpreter looks for the reference value, it first retrieves its address in the stack and retrieves the entity from the heap.Copy the code

The assignment

When we assign an object to a new variable, we assign the object’s address on the stack, not the data in the heap. That is, two objects point to the same storage space. If any object is changed, it is the content of the changed storage space. Therefore, the two objects are linked.

Let obj1 = {'name':'wukongkong', 'age':'18', 'language':['1',['2','3']] } let obj2 = obj1 obj2.name = 'dasheng' obj2.language[1][0] = 'no' console.log('obj1',obj1) Console. log('obj2',obj2) Now obj1,obj2 changes are linkedCopy the code

Deep and shallow copies are only for reference data types such as Object and Array

Shallow copy

A shallow copy is a bitwise copy of an object that creates a new object with an exact copy of the original object’s property values. If the property is of a primitive type, the value of the primitive type is copied. If the property is a memory address (reference type), the memory address is copied, so if one object changes the address, the other object will be affected. That is, the default copy constructor only copies objects shallowly (member by member), that is, only the object space is copied, not the resource.

/ / shallow copy let obj1 = {' name ':' wokongkong ', 'age', '18', 'language':[1,[2,3]]} let obj2 = object.assign ({},obj1) obj2.name = 'dasheng' obj2.language[1][0] = '666' console.log('obj1',obj1) console.log('obj2',obj2)Copy the code

So shallow copy only solves the problem of the first level. If there are other objects in the following value, they share the same address.

Shallow copy implementation

Object.assign() will only copy all of the attributes to the new Object. If the values are objects, you will copy the address expansion operators...Copy the code

Deep copy

Deep copy creates an identical object. The new object does not share memory with the original object, and changes to the new object do not change to the original object.

Deep copy implementation method

  • JSON.parse(JSON.stringify(object))

Limitations: undefined will be ignored and symbol will be ignored. The function cannot serialize objects that are referred to in a loop

  • The popular lodash library also offers _. CloneDeep for deep copy
  • Jquery provides a $.extend that can be used for deep copies
  • JSON.parse(JSON.stringify())
  • Handwritten recursive method

Recursively deep copy works: to copy a piece of data, we must iterate over its properties. If the properties of the object are still objects, we continue to use this method, and so on.