Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve the circular citation problem in Javascript deep cloning". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to solve the circular citation problem in Javascript deep cloning" can help you solve the problem.

Summary

In front-end project development, we often need to deeply clone JS objects. In the process of clone code development, we often encounter the problem of array determination or object circular reference.

In this paper, we use examples to solve the above problems.

Code and implementation

Common code for deep cloning of JS objects

Function deepClone (origin) {

If (origin = = undefined | | typeof origin! = = "object") {

Return origin

}

If (origin instanceof Date) {

Return new Date (origin)

}

Let keys = Reflect.ownKeys (origin)

Let target = {}

If (Object.prototype.toString.call (origin) = = "[object Array]") {

Target = []

}

For (let key of keys) {

Target [key] = deepClone (key)

}

Return target

}

There are two main problems with the above code:

The array decision code is too troublesome

If a circular reference occurs in the object, the code will report an error.

Circular reference code:

Var obj = {a: 1}

Obj.obj1 = obj

Var newObj = deepClone (obj)

Console.log (newObj)

Error message:

The reason for the error is simple, because there is a circular reference in the object, so the recursion cannot be finished, and the memory overflows.

The solution of the problem of circular reference

Recursion cannot end because of a circular reference in the object. If we record which object is cloned and which object is not cloned, we can force the end of recursion to avoid memory leaks.

When we choose WeekMap to record whether the object has been cloned, we mainly consider the following three points:

The WeakMap object is in the form of key = > value and will not be recorded repeatedly.

The key of a WeakMap object must be an object

If WeakMap is referenced, if it is no longer used, the memory space will be released directly.

The improvement code is as follows:

Function deepClone (origin, map = new WeakMap ()) {

If (origin = = undefined | | typeof origin! = = "object") {

Return origin

}

If (origin instanceof Date) {

Return new Date (origin)

}

If (origin instanceof RegExp) {

Return new RegExp (origin)

}

Var copied = map.get (origin)

If (!! copied) {

Return copied

}

Let target = {}

If (Object.prototype.toString.call (origin) = = "[object Array]") {

Target = []

}

Map.set (origin, target)

Let keys = Reflect.ownKeys (origin)

For (let key of keys) {

Target [key] = deepClone (origin [key], map)

}

Return target

}

Record whether the object has been copied through WeakMap. If so, the copied object will be returned directly without repeated cloning.

If it hasn't been copied, build an array or plain JS object before recording it.

Clone an object that has a circular reference, as follows:

Var obj = {a: 1}

Obj.obj1 = obj

Var newObj = deepClone (obj)

Console.log (newObj)

The implementation results are as follows:

Code Optimization of Array decision

Before cloning, we must know whether the object to be cloned is a normal JS object or an array. Can we change the way of thinking that any object has its own constructor? if we directly use the constructor to construct the object, we don't need the type of the previous object.

All objects in JS have their own prototype chain, which contains the constructor of the base class Object, as shown below:

JS normal object

JS array:

The constructors of JS normal objects can construct {}, and the constructors of JS arrays can construct []. So if we call this constructor, there is no need to determine whether the array is a normal object.

The improved code is as follows:

Function deepClone (origin, map = new WeakMap ()) {

If (origin = = undefined | | typeof origin! = = "object") {

Return origin

}

If (origin instanceof Date) {

Return new Date (origin)

}

Var copied = map.get (origin)

If (!! copied) {

Return copied

}

Let target = new origin.constructor ()

Map.set (origin, target)

Let keys = Reflect.ownKeys (origin)

For (let key of keys) {

Target [key] = deepClone (origin [key], map)

}

Return target

}

This is the end of the content on "how to solve the problem of circular references in Javascript deep cloning". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.