<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
var o = {
a: {
b: 1,
c: 2,
d: 3,
j: {
k: [1,2,3],
l: [4,5,6]
},
},
e: [1,2,3,4,5,6],
f: 1,
g: {
h: 1,
}
}
const a = _.clone(o)
const a = _.cloneDeep(o)
const a = JSON.parse(JSON.stringify(o))
const a = o
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash clone | |
Lodash cloneDeep | |
JSON.parse(JSON.stringify(o)) | |
structuredClone |
Test name | Executions per second |
---|---|
Lodash clone | 3220735.0 Ops/sec |
Lodash cloneDeep | 498924.0 Ops/sec |
JSON.parse(JSON.stringify(o)) | 838850.2 Ops/sec |
structuredClone | 33214286.0 Ops/sec |
Measuring JavaScript performance is crucial in today's fast-paced web development landscape. Let's break down the provided benchmarking test and explore the different approaches being compared.
Benchmark Overview
The benchmark compares four methods for object cloning:
structuredClone
JSON.parse(JSON.stringify(o))
clone
functioncloneDeep
functionEach method is tested against a sample input object o
, which consists of nested objects and arrays.
Method Overview
structuredClone
): Introduced in ECMAScript 2020, this method allows for deep cloning of objects while preserving metadata. It creates a new object with the same structure as the original but copies all its properties, including references to other objects.clone
function: Lodash provides a simple way to clone an object, which creates a shallow copy by recursively copying properties. This method is suitable for most cases but may not work well with complex nested structures.cloneDeep
function: A variation of the clone
function, cloneDeep
creates a deep copy of the object, which means it will recursively copy all nested properties.Comparison and Pros/Cons
Method | Description | Pros | Cons |
---|---|---|---|
structuredClone |
Deep cloning with metadata preservation | Preserves original references | Currently only supported in modern browsers (Chrome 119) |
JSON.parse(JSON.stringify(o)) |
Uses JSON serialization and deserialization | Simple to implement | May fail with circular references or complex objects |
Lodash's clone |
Shallow copying | Fast and lightweight | May not work well with deeply nested structures |
Lodash's cloneDeep |
Deep copying | Suitable for most cases | Slower than shallow cloning |
Library and Syntax
The benchmark uses the Lodash library, which provides a set of utility functions for various tasks. The clone
and cloneDeep
functions are used to clone objects.
Special JS Feature
There is no special JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that some browsers may have additional features or polyfills that affect the performance of certain methods.
Alternatives
If you need an alternative to Lodash for object cloning, you can consider using:
Array.prototype.slice.call()
and Object.assign()
Object.create()
and Object.assign()
Keep in mind that these alternatives may have different performance characteristics or limitations compared to the methods being tested.
In summary, the benchmark provides a useful comparison of four object cloning methods, each with its strengths and weaknesses. By understanding the differences between these approaches, developers can make informed decisions about which method best suits their specific use cases.