<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...'
}
};
var myCopy = null;
function cloneObject(o) {
if (typeof o !== 'object' || o === null) return o;
let out = Array.isArray(o) ? [] : {};
for (let k in o) {
out[k] = (typeof o[k] === "object" && o[k] !== null)
? cloneObject(o[k])
: o[k];
}
return out;
}
myCopy = _.cloneDeep(MyObject);
myCopy = structuredClone(MyObject);
myCopy = cloneObject(MyObject);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash cloneDeep | |
Native structuredClone | |
My shitty simple clone logic |
Test name | Executions per second |
---|---|
Lodash cloneDeep | 571579.1 Ops/sec |
Native structuredClone | 241363.4 Ops/sec |
My shitty simple clone logic | 1168613.2 Ops/sec |
Let's dive into the benchmark and explain what's being tested.
The provided JSON represents a JavaScript microbenchmarking test case on MeasureThat.net. The test measures the performance of three different approaches to create a deep copy of an object:
cloneDeep
function from the Lodash library is used to create a deep copy of the input object, MyObject
. Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, object creation, and more.structuredClone
function from the Web APIs (WebAssembly API) is used to create a deep copy of the input object, MyObject
. This function was introduced in recent browsers as a part of the Web Assembly specification.cloneObject
, is defined by the test author to create a deep copy of the input object, MyObject
. This implementation is intentionally simplistic and may not be suitable for production use.Let's analyze each approach:
Pros and Cons
Library Analysis
The structuredClone
function is a relatively new addition to the Web APIs, introduced in recent browsers. It's designed to create a deep copy of an object or array while preserving its structure and properties. This function is optimized for performance and handles complex data structures correctly.
Lodash, on the other hand, is a well-established library with a wide range of features and utility functions. Its cloneDeep
function is specifically designed for creating deep copies of objects and arrays.
Special JS Feature or Syntax
There's no explicit mention of special JavaScript features or syntax in this benchmark. However, the use of ES6-style object literals (e.g., var MyObject = { ... }
) and modern array methods (let out = Array.isArray(o) ? [] : {}
) suggest that the test is using relatively modern JavaScript features.
Other Alternatives
If you need to create deep copies of objects or arrays in your own code, consider the following alternatives:
Object.assign(newObj, obj)
.Keep in mind that these alternatives may have different performance characteristics and may not handle complex data structures correctly.