<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jsondiffpatch@0.4.1/dist/jsondiffpatch.umd.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/rfdc@1.3.0'></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...'
}
};
var myCopy = null;
var rfdcClone = rfdc();
///////////////////////////////////////////////////////////////////
function recursiveDeepCopy(value) {
if (value instanceof Date) {
return new Date(value);
}
if (value instanceof RegExp) {
return new RegExp(value);
}
if (value instanceof Map) {
return new Map(value);
}
if (value instanceof Set) {
return new Set(value);
}
if (typeof value !== 'object') {
return value;
}
if (!value) {
return value;
}
let newObject;
if ('[object Array]' === Object.prototype.toString.apply(value)) {
newObject = [];
for (let i = 0; i < value.length; i += 1) {
newObject[i] = recursiveDeepCopy(value[i]);
}
return newObject;
}
newObject = {};
for (let i in value) {
if (value.hasOwnProperty(i)) {
newObject[i] = recursiveDeepCopy(value[i]);
}
}
return newObject;
}
myCopy = _.cloneDeep(MyObject);
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = recursiveDeepCopy(MyObject);
myCopy = structuredClone(MyObject);
myCopy = rfdcClone(MyObject);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash cloneDeep | |
JSON.parse(JSON.stringify()) | |
recursiveDeepCopy | |
structuredClone | |
rfdc |
Test name | Executions per second |
---|---|
lodash cloneDeep | 1845975.6 Ops/sec |
JSON.parse(JSON.stringify()) | 1586476.0 Ops/sec |
recursiveDeepCopy | 5341361.0 Ops/sec |
structuredClone | 747519.0 Ops/sec |
rfdc | 6468581.5 Ops/sec |
The benchmark defined in the provided JSON measures the performance of different methods for creating deep copies of a JavaScript object. Here’s an explanation of the various approaches tested, including their pros and cons.
Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
cloneDeep
from Lodash is specifically designed to create a deep clone of an object, handling complex data structures such as nested objects and arrays.JSON Stringify/Parse
myCopy = JSON.parse(JSON.stringify(MyObject));
undefined
, Date
, Map
, Set
, etc.Recursive Deep Copy
myCopy = recursiveDeepCopy(MyObject);
Structured Clone
myCopy = structuredClone(MyObject);
structuredClone
is a built-in method introduced in modern browsers to create deep copies of objects. RFDC (Really Fast Deep Clone)
myCopy = rfdcClone(MyObject);
From the benchmark results, we see the following ExecutionsPerSecond
rates for each method:
In summary, developers have several options for deep cloning objects in JavaScript, each with varying pros and cons:
cloneDeep
: Great for general use; possible dependency concern.Choosing the right method depends on the specific requirements of the application, including the types of data being cloned and performance considerations.