user2666750 user2666750 - 2 months ago 16
Javascript Question

javascript deep copy using JSON

I have problem with javascript object(array) deep copy. I read many good way to deal with it. And I also know that jQuery has $.extend API to this problem. But my question is: why can I just using JSON stringify and parse method to solve this problem?

Here's my code:

function deepCopy(oldValue) {
var newValue
strValue = JSON.stringify(oldValue)
return newValue = JSON.parse(strValue)
}

var a = {
b: 'b',
c: [1,2,4],
d: null
}

copy = deepCopy(a)

console.log(a === copy) // false
console.log(a.b === copy.b) // true
console.log(a.c === copy.c) // false
console.log(a.d === copy.d) // true


PS: I've known that if no all objects are serializable, but the only situation I know is that when the object contains a property which is function. Any other situation ?

Forgive my poor English, and it's nice if you can point it out.

Answer

If your object is "small" and contains exclusively serializable properties, a simple deepCopy hack using JSON serialization should be OK. But, if your object is large, you could run into problems. And if it contains unserializable properties, those'll go missing:

var o = {
 a: 1,
 b: 2,
 sum: function() { return a + b; }
};

var o2 = JSON.parse(JSON.stringify(o));
console.log(o2);

Yields:

Object {a: 1, b: 2}

Interestingly enough, a fair number of deep-copy solutions in C# are similar serialization/deserialization tricks.

Addendum: Not sure what you're hoping for in terms of comparing the objects after the copy. But, for complex objects, you generally need to write your own Compare() and/or Equals() method for an accurate comparison.

Also notable, this sort of copy doesn't preserve type information.

JSON.parse(JSON.stringify(new A())) instanceof A === false