Mandatory interview questions: 1. shallow copy and deep copy_ Deep copy

Deep copy

start

• Create a new memory area , Copy metadata ,

1. The most common

The most common deep copy That must be JSON.stringify(JSON.parse())

But it has flaws ：

• I won't support it undefined,function,Symbol
• Circular references... Are not supported
• Some special object types are not supported
• etc.

It meets most usage scenarios , It is also a good method .

Write a deep copy

function deepClone (target, hash = new WeakMap()) {
     //  Open up an extra storage space WeakMap To store the current object 
  if (target === null) return target
  if (target instanceof Date) return new Date(target)
  if (target instanceof RegExp) return new RegExp(target)
  if (target instanceof HTMLElement) return target //  Handle  DOM Elements 

  if (typeof target !== 'object') return target

  if (hash.get(target)) return hash.get(target) //  When you need to copy the current object , First go to the storage space to find , If there is one, go straight back to 
  const cloneTarget = new target.constructor()
  hash.set(target, cloneTarget) //  If not in the storage space, save  hash  in 

  Reflect.ownKeys(target).forEach(key => {
    
    cloneTarget[key] = deepClone(target[key], hash) //  Recursively copy each layer 
  })
  return cloneTarget
}

matters needing attention ：

1. The above code is ES6 Version of , Consider the common situation for the time being .
2. Introduced WeakMap
3. new target.constructor() The type of the incoming parameter is , Declare what type of data （ Distinguish between arrays and objects ）
4. Reflect.ownKeys （Reflect.ownKeys Method returns an array of the property keys of the target object itself . Its return value is equal to ） He can copy Symbol Type key

Other questions

1. Circular reference

adopt WeakMap Or an array to store deeply cloned data , Just compare it before each clone . Cloned direct return

2. Objects that need to be copied , Multiple attributes point to the same reference address ,（ Also known as reference loss ）

The solution is the same as the problem , Direct array stores cloned data , Duplicate data directly return that will do .

3. Recursive stack explosion

When there are many levels , Recursively call , It is likely to lead to recursive stack explosion , The solution in this way , You can refer to article , Not applicable to recursion , Instead, use a loop to do this place .

Quality blog

• https://juejin.cn/post/7072528644739956773#heading-0
• https://juejin.cn/post/6844903775283445767#heading-5
• https://segmentfault.com/a/1190000016672263