<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
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;
}
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;
myCopy = _.cloneDeep(MyObject);
myCopy = recursiveDeepCopy(MyObject);
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = structuredClone(MyObject);
myCopy = {MyObject}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash | |
Custom function | |
JSON.parse | |
structuredClone | |
simple |
Test name | Executions per second |
---|---|
Lodash | 1821834.4 Ops/sec |
Custom function | 4424030.5 Ops/sec |
JSON.parse | 1504221.0 Ops/sec |
structuredClone | 876482.7 Ops/sec |
simple | 9122815.0 Ops/sec |
Let's break down the provided benchmark and explain what's being tested.
Benchmark Definition JSON
The benchmark defines a set of test cases to compare different approaches for creating a deep clone of an object. The object, MyObject
, is defined with various properties, including a nested object jayson
. This object contains two relevant properties: stringify
and parse
, which are related to the JSON serialization and deserialization process.
Test Cases
There are five test cases:
_cloneDeep
function from the Lodash library to create a deep clone of MyObject
.recursiveDeepCopy
, to create a deep clone of MyObject
.MyObject
using JSON.stringify
and then parsing the result back into an object.structuredClone
function, introduced in modern browsers (including Safari 15), to create a deep clone of MyObject
.MyObject
by simply using the spread operator ({...}
).Options Comparison
The test cases compare the performance of different approaches:
structuredClone
is designed for deep cloning objects and is likely to be faster than using JSON.parse
. This is because structuredClone
avoids the need to serialize and deserialize the object, whereas JSON.parse
involves converting the object to a string, parsing it, and then converting it back to an object.structuredClone
is a built-in function optimized for deep cloning objects.Pros and Cons
Here are some pros and cons associated with each approach:
structuredClone
and Lodash due to serialization and deserialization overhead.Library Usage
In this benchmark, the following libraries are used:
_cloneDeep
function)Special JavaScript Features
The benchmark utilizes the structuredClone
function, which is a relatively new feature introduced in modern browsers. It allows for creating deep clones of objects without requiring serialization and deserialization.
Overall, this benchmark provides insight into the performance differences between various approaches to deep cloning objects in JavaScript, highlighting the trade-offs between using built-in functions like structuredClone
, Lodash, or implementing custom solutions.