Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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: 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.c === copy.c) // false 

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?

like image 261
user2666750 Avatar asked Dec 18 '13 15:12

user2666750


People also ask

How do you make a deep copy in JavaScript?

Copy an Object With Object. assign() was the most popular way to deep copy an object. Object. assign() will copy everything into the new object, including any functions. Mutating the copied object also doesn't affect the original object.

Does JavaScript have deep copy?

Like most other programming languages JavaScript allows supports the concept of deep copy and shallow copy. Shallow Copy: When a reference variable is copied into a new reference variable using the assignment operator, a shallow copy of the referenced object is created.

Does JSON parse JSON Stringify deep copy?

Simple way of deep copying objects So, if you simply want to deep copy the object to another object, all you will need to do is JSON. stringify the object and parse it using JSON. parse afterward.

What is the most efficient way to deep clone an object in JavaScript?

According to the benchmark test, the fastest way to deep clone an object in javascript is to use lodash deep clone function since Object. assign supports only shallow copy.


2 Answers

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 
like image 176
svidgen Avatar answered Sep 28 '22 01:09

svidgen


You can do it that way, but it's problematic for some of the reasons listed above:

  1. I question the performance.

  2. Do you have any non-serializable properties?

  3. And the biggest: your clone is missing type information. Depending upon what you're doing, that could be significant. Did the implementor add methods to the prototype of your original objects? Those are gone. I'm not sure what else you'll lose.

like image 37
Joseph Larson Avatar answered Sep 28 '22 02:09

Joseph Larson