Don't use JSON.stringify for deep copying

Various pits for deep copying by JSON.stringify()


When there are elements of time type in the object ----- the time type will be changed to string type data


const obj = {
date:new Date()
}
typeof obj.date === 'object' //true
const objCopy = JSON.parse(JSON.stringify(obj));
typeof objCopy.date === string; //true

Then you will be surprised to find that getTime() can't be adjusted, and getYearFull() can't be adjusted. The built-in methods of all time types cannot be adjusted.
However, the built-in methods of the string type are fully adjustable.

When there is data of undefined type or function type in the object --- undefined and function will be lost directly


const obj = {
undef: undefined,
fun: () => { console.log('Crackling, Aba Aba') }
}
console.log(obj,"obj");
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy,"objCopy")


Then you will find that both types of data are gone.

When there are three values ​​of NaN, Infinity and -Infinity in the object --- will become null


1.7976931348623157E+10308 is the maximum upper limit for floating point numbers shown as Infinity
-1.7976931348623157E+10308 is the minimum infinity for floating point numbers shown as -Infinity
const obj = {
nan:NaN,
infinityMax: 1.7976931348623157E+10308,
infinityMin:-1.7976931348623157E+10308,
}
console.log(obj, "obj");
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy,"objCopy")



When the object is referenced circularly -- an error will be reported


const obj = {
objChild:null
}
obj.objChild = obj;
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy,"objCopy")


If you are lucky enough to need to copy such an object ↓
const obj = {
nan:NaN,
infinityMax: 1.7976931348623157E+10308,
infinityMin:-1.7976931348623157E+10308,
undef: undefined,
fun: () => { console.log('Crackling, Aba Aba') },
date:new Date,
}

And then you'll find out, man, none of it's normal.

Are you still using JSON.stringify() for deep copying?
Be careful if you are still using it. The author recommends that the deep copy be performed in a recursive way in the future.
Four ways to implement deep copy in advanced javascript articles - Nuggets (juejin.cn)
In this article, there are encapsulated recursive functions that can be deeply copied, and pen pals can pick them up.
Summarize

When there is a time type in the object, it will become a string type after serialization.
When there is undefined and Function type data in the object, it will be lost directly after serialization.
When there are NaN, Infinity and -Infinity in the object, null will be displayed after serialization.
When the object is referenced circularly, an error will be reported directly.
Finally, deep copy is recommended to use recursion, which is safe and convenient.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00