<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
var MyObject = {
description: 'Creates a deep copy of source, which should be an object or an array.',
myNumber: 123456789,
myBoolean: true,
jayson: {
stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
parse: 'JSON.parse() method parses a JSON string...'
},
'10kbData': {"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":""},"fr":24,"ip":0,"op":13,"w":1920,"h":1080,"nm":"Memory-Quote2-Land","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-90,"ix":10},"p":{"a":0,"k":[1881.361,374.222,0],"ix":2},"a":{"a":0,"k":[-269.25,-364.002,0],"ix":1},"s":{"a":0,"k":[75,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[0,0],[-45.968,15.004],[-103.629,-7.26],[-61.666,-72.221]],"o":[[36.695,-28.209],[97.244,-31.74],[103.629,7.26],[0,0]],"v":[[-336.636,52.976],[-208.147,-7.912],[96.474,-54.322],[336.636,55.716]],"c":true}],"h":1},{"t":4,"s":[{"i":[[0,0],[-45.968,15.004],[-103.629,-7.26],[-61.666,-72.221]],"o":[[36.695,-28.209],[97.244,-31.74],[103.629,7.26],[0,0]],"v":[[-336.636,52.976],[-214.147,-17.912],[104.474,-62.322],[360.636,65.716]],"c":true}],"h":1},{"t":8,"s":[{"i":[[0,0],[-45.968,15.004],[-103.629,-7.26],[-61.666,-72.221]],"o":[[36.695,-28.209],[97.244,-31.74],[103.629,7.26],[0,0]],"v":[[-326.636,58.976],[-214.147,-27.912],[118.474,-56.322],[368.636,67.716]],"c":true}],"h":1},{"t":12,"s":[{"i":[[0,0],[-45.968,15.004],[-103.629,-7.26],[-61.666,-72.221]],"o":[[36.695,-28.209],[97.244,-31.74],[103.629,7.26],[0,0]],"v":[[-326.636,58.976],[-198.147,-35.912],[148.474,-56.322],[368.636,67.716]],"c":true}],"h":1}],"ix":2,"x":"var $bm_rt;\n$bm_rt = valueAtTime($bm_mod(time, key(numKeys).time));"},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411764706,0.890196078431,0.827450980392,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-281.25,-364.953],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":13,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[968.877,550.26,0],"ix":2},"a":{"a":0,"k":[1.456,-1.205,0],"ix":1},"s":{"a":0,"k":[205,205,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[-47.261,31.437],[-8.255,3.808],[-76.669,0.735],[-31.343,-13.495],[-26.732,-33.773],[32.905,-110.042],[90.622,-24.059],[92.12,17.006],[27.62,19.559],[9.674,70.435],[-18.606,51.725]],"o":[[7.45,-4.956],[70.657,-32.595],[33.978,-0.326],[39.06,16.818],[70.672,89.286],[-27.509,91.999],[-90.622,24.058],[-33.007,-6.093],[-56.97,-40.344],[-7.539,-54.888],[18.724,-52.052]],"v":[[-217.06,-253.78],[-193.508,-266.969],[34.552,-305.399],[134.643,-289.893],[261.099,-199.73],[323.769,110.638],[120.44,291.295],[-158.09,287.922],[-254.544,236.922],[-335.601,47.471],[-314.371,-117.504]],"c":true}],"h":1},{"t":4,"s":[{"i":[[-47.261,31.437],[-8.255,3.808],[-76.669,0.735],[-31.343,-13.495],[-26.732,-33.773],[32.905,-110.042],[90.622,-24.059],[92.12,17.006],[27.62,19.559],[9.674,70.435],[-18.606,51.725]],"o":[[7.45,-4.956],[70.657,-32.595],[33.978,-0.326],[39.06,16.818],[70.672,89.286],[-27.509,91.999],[-90.622,24.058],[-33.007,-6.093],[-56.97,-40.344],[-7.539,-54.888],[18.724,-52.052]],"v":[[-217.06,-253.78],[-193.508,-266.969],[34.552,-305.399],[144.643,-293.893],[271.099,-195.73],[323.769,110.638],[134.44,305.295],[-158.09,287.922],[-254.544,236.922],[-343.601,51.471],[-314.371,-117.504]],"c":true}],"h":1},{"t":8,"s":[{"i":[[-50.421,26.07],[-8.623,2.881],[-76.288,-7.67],[-29.676,-16.848],[-22.871,-36.499],[44.764,-105.774],[92.712,-13.984],[89.702,26.997],[25.31,22.468],[1.898,71.071],[-24.162,49.375]],"o":[[7.948,-4.11],[73.803,-24.657],[33.809,3.399],[36.982,20.996],[60.464,96.492],[-37.424,88.431],[-92.712,13.984],[-32.141,-9.673],[-52.206,-46.343],[-1.479,-55.384],[24.315,-49.687]],"v":[[-187.073,-276.292],[-162.217,-286.821],[69.556,-307.982],[176.847,-276.531],[297.092,-158.482],[302.569,139.192],[101.052,303.932],[-179.814,274.61],[-278.098,207.349],[-336.299,13.256],[-298.73,-151.499]],"c":true}],"h":1},{"t":12,"s":[{"i":[[-50.421,26.07],[-8.623,2.881],[-76.288,-7.67],[-29.676,-16.848],[-22.871,-36.499],[44.764,-105.774],[92.712,-13.984],[89.702,26.997],[25.31,22.468],[1.898,71.071],[-24.162,49.375]],"o":[[7.948,-4.11],[73.803,-24.657],[33.809,3.399],[36.982,20.996],[60.464,96.492],[-37.424,88.431],[-92.712,13.984],[-32.141,-9.673],[-52.206,-46.343],[-1.479,-55.384],[24.315,-49.687]],"v":[[-187.073,-276.292],[-162.217,-286.821],[69.556,-315.982],[188.847,-276.531],[305.092,-152.482],[288.569,171.192],[73.052,301.932],[-179.814,274.61],[-278.098,207.349],[-342.299,7.256],[-298.73,-151.499]],"c":true}],"h":1}],"ix":2,"x":"var $bm_rt;\n$bm_rt = valueAtTime($bm_mod(time, key(numKeys).time));"},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411764706,0.890196078431,0.827450980392,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":13,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[68.5,734.5,0],"ix":2},"a":{"a":0,"k":[88.5,674.5,0],"ix":1},"s":{"a":0,"k":[100,108,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[0,0],[-23.604,23.519],[7.934,92.571],[49.672,80.029],[32.472,24.032]],"o":[[31.158,-13.442],[67.5,-67.258],[-7.934,-92.571],[-20.898,-33.671],[0,0]],"v":[[-89,335],[3.528,279.01],[89.64,21.209],[-7.28,-239.277],[-91,-335]],"c":false}],"h":1},{"t":4,"s":[{"i":[[0,0],[-23.604,23.519],[7.934,92.571],[49.672,80.029],[32.472,24.032]],"o":[[31.158,-13.442],[67.501,-67.258],[-7.934,-92.571],[-20.898,-33.671],[0,0]],"v":[[-117,361],[11.528,281.01],[99.64,27.209],[12.72,-235.277],[-109,-339]],"c":false}],"h":1},{"t":8,"s":[{"i":[[0,0],[-23.604,23.519],[7.934,92.571],[49.672,80.029],[32.472,24.032]],"o":[[31.158,-13.442],[67.5,-67.258],[-7.934,-92.571],[-20.898,-33.671],[0,0]],"v":[[-103,333],[23.528,271.01],[91.64,-2.791],[-1.28,-223.277],[-105,-327]],"c":false}],"h":1},{"t":12,"s":[{"i":[[0,0],[-23.604,23.519],[7.934,92.571],[49.672,80.029],[32.472,24.032]],"o":[[31.158,-13.442],[67.5,-67.258],[-7.934,-92.571],[-20.898,-33.671],[0,0]],"v":[[-107,329],[3.528,279.01],[71.64,27.209],[4.72,-225.277],[-91,-335]],"c":false}],"h":1}],"ix":2,"x":"var $bm_rt;\n$bm_rt = valueAtTime($bm_mod(time, key(numKeys).time));"},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.929411764706,0.890196078431,0.827450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[91.499,674.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[0,0],[-11.075,66.776],[18.478,42.921],[37.982,42.5]],"o":[[58.015,-40.618],[7.579,-45.697],[-22.458,-52.166],[0,0]],"v":[[-62.552,242.5],[60.606,59.897],[33.948,-100.647],[-54.552,-242.5]],"c":false}],"h":1},{"t":4,"s":[{"i":[[0,0],[-11.075,66.776],[18.478,42.921],[37.982,42.5]],"o":[[58.015,-40.618],[7.579,-45.697],[-22.458,-52.166],[0,0]],"v":[[-68.552,262.5],[68.606,69.897],[39.948,-112.647],[-68.552,-254.5]],"c":false}],"h":1},{"t":8,"s":[{"i":[[0,0],[-11.075,66.776],[18.478,42.921],[37.982,42.5]],"o":[[58.015,-40.618],[7.579,-45.697],[-22.458,-52.166],[0,0]],"v":[[-62.552,242.5],[66.606,81.897],[29.948,-128.647],[-54.552,-242.5]],"c":false}],"h":1},{"t":12,"s":[{"i":[[0,0],[-11.075,66.776],[18.478,42.921],[37.982,42.5]],"o":[[58.015,-40.618],[7.579,-45.697],[-22.458,-52.166],[0,0]],"v":[[-62.552,242.5],[36.606,65.897],[33.948,-100.647],[-54.552,-242.5]],"c":false}],"h":1}],"ix":2,"x":"var $bm_rt;\n$bm_rt = valueAtTime($bm_mod(time, key(numKeys).time));"},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.929411764706,0.890196078431,0.827450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[57.052,692],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[0,0],[-7.833,18.658],[49.863,63.714]],"o":[[17.668,-12.109],[30.578,-72.841],[0,0]],"v":[[-29.541,144],[14.811,88.368],[-23.542,-144]],"c":false}],"h":1},{"t":4,"s":[{"i":[[0,0],[-8.938,18.658],[56.897,63.714]],"o":[[20.161,-12.109],[34.891,-72.841],[0,0]],"v":[[-29.541,144],[21.067,88.368],[-22.695,-144]],"c":false}],"h":1},{"t":8,"s":[{"i":[[0,0],[-10.099,17.536],[73.501,68.5]],"o":[[17.668,-12.109],[47.148,-81.868],[0,0]],"v":[[-29.541,144],[14.811,88.368],[-23.542,-144]],"c":false}],"h":1},{"t":12,"s":[{"i":[[0,0],[-7.833,18.658],[49.863,63.714]],"o":[[17.668,-12.109],[30.578,-72.841],[0,0]],"v":[[-29.541,144],[20.811,82.368],[-33.542,-134]],"c":false}],"h":1}],"ix":2,"x":"var $bm_rt;\n$bm_rt = valueAtTime($bm_mod(time, key(numKeys).time));"},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.929411764706,0.890196078431,0.827450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.041,701.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":13,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,539,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[960,541],[-960,541],[-960,-541],[960,-541]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.23137255013,0.341176480055,0.40000000596,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":13,"st":0,"bm":0}],"markers":[]}
};
var myCopy = null;
function recursiveDeepCopy(o) {
var newO,
i;
if (typeof o !== 'object') {
return o;
}
if (!o) {
return o;
}
if ('[object Array]' === Object.prototype.toString.apply(o)) {
newO = [];
for (i = 0; i < o.length; i += 1) {
newO[i] = recursiveDeepCopy(o[i]);
}
return newO;
}
newO = {};
for (i in o) {
if (o.hasOwnProperty(i)) {
newO[i] = recursiveDeepCopy(o[i]);
}
}
return newO;
}
myCopy = _.cloneDeep(MyObject);
myCopy = structuredClone(MyObject);
myCopy = recursiveDeepCopy(MyObject);
myCopy = JSON.parse(JSON.stringify(MyObject));
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash cloneDeep | |
Native structuredClone | |
recursiveDeepCopy | |
Json Clone |
Test name | Executions per second |
---|---|
Lodash cloneDeep | 4665.2 Ops/sec |
Native structuredClone | 10060.0 Ops/sec |
recursiveDeepCopy | 7016.9 Ops/sec |
Json Clone | 7435.5 Ops/sec |
I'll do my best to extract the relevant information from the provided JSON strings.
Benchmark Results
The latest benchmark results show that:
structuredClone
outperforms all other methods, with an average of 7,416 executions per second.JSON.parse(JSON.stringify())
is the slowest method, with an average of 4,665 executions per second.Lodash cloneDeep
cloneDeep
function performs better than the JSON method, but still slower than structuredClone
, with an average of 4,665 executions per second.recursiveDeepCopy
recursiveDeepCopy
function is slower than JSON.parse(JSON.stringify())
, but faster than Lodash cloneDeep
, with an average of 7,016 executions per second.Based on these results, it appears that structuredClone
is the fastest method for deep cloning objects in JavaScript.