Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
deep clone2
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
JSON parse vs _.deepClone vs fast-clone
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script> <script src="https://cdn.rawgit.com/ivolovikov/fastest-clone/master/index.js"></script>
Script Preparation code:
var source = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; //var source = {a:1}; //var CloneFactory = FastClone.factory(source); function clone(value) { var type = typeof value; switch (type) { case 'object': // null and undefined if (value == null) { return value; } var result = void 0; if (value instanceof Date) { result = new Date(); result.setTime(value.getTime()); return result; } else if (value instanceof RegExp) { result = newRegExp(value); return result; } result = JSON.parse(JSON.stringify(value)); fixTypes(value, result); return result; default: return value; } } function fixPropertyValue(original, copy, key) { var originalValue = original[key]; var originalType = typeof originalValue; switch (originalType) { case 'object': if (originalValue instanceof Date) { var newValue = new Date(); newValue.setTime(originalValue.getTime()); copy[key] = newValue; } else if (originalValue instanceof RegExp) { copy[key] = newRegExp(originalValue); } else if (originalValue == null) { copy[key] = originalValue; } else { fixTypes(originalValue, copy[key]); } break; case 'number': if (isNaN(originalValue)) { copy[key] = NaN; } else if (originalValue == Infinity) { copy[key] = Infinity; } break; default: break; } } function fixTypes(original, copy) { if (original instanceof Array) { for (var index = 0; index < original.length; index++) { fixPropertyValue(original, copy, index); } } else { var keys = Object.getOwnPropertyNames(original); keys.forEach(function (key) { fixPropertyValue(original, copy, key); }); } } function newRegExp(value) { var regexpText = String(value); var slashIndex = regexpText.lastIndexOf('/'); return new RegExp(regexpText.slice(1, slashIndex), regexpText.slice(slashIndex + 1)); }
Tests:
JSON parse
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var deep = JSON.parse(JSON.stringify(objects));
_.deepClone
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var deep = _.cloneDeep(objects);
fast-clone
//var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; var deep = clone(objects);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
JSON parse
_.deepClone
fast-clone
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Definition** The benchmark compares three methods for creating a deep clone of an object: 1. The new ES6 spread operator (`{...obj}`). 2. The traditional `concat()` method (by joining arrays and objects with dots or brackets). 3. A custom cloning function `clone()` that handles various types, including dates, regular expressions, and primitive values. **Options Compared** The benchmark compares two methods: 1. **ES6 Spread Operator (`{...obj}`)**: This method creates a shallow copy of the object by spreading its properties into a new object. 2. **_.deepClone (Lodash's Deep Clone)**: This method creates a deep copy of the object by recursively cloning its properties. **Pros and Cons** * **ES6 Spread Operator (`{...obj}`)`: * Pros: Simple, concise, and efficient for shallow copies. * Cons: Fails for objects with nested arrays or other complex structures. Does not handle dates, regular expressions, or primitive values correctly. * **_.deepClone (Lodash's Deep Clone)**: * Pros: Handles nested arrays, objects, dates, regular expressions, and primitive values correctly. Provides a more robust cloning function. * Cons: May be slower due to the recursive nature of the cloning process. **Library Used** The benchmark uses two libraries: * **Lodash ( _.cloneDeep )**: A popular JavaScript utility library that provides various functions for manipulating data structures, including deep cloning. * **FastClone**: A custom cloning function implemented by the benchmark creator. This function is not a widely recognized library but demonstrates an alternative approach to cloning. **Special JS Feature/Syntax** The benchmark utilizes ES6 features: * The new spread operator (`{...obj}`) for creating shallow copies of objects. * The dot notation (e.g., `objects.a`) and bracket notation (e.g., `objects['a']`) for accessing object properties. **Benchmark Results** The latest benchmark results show the following performance characteristics: * **JSON parse**: All three methods are relatively fast, with Chrome 87 executing approximately 315,053 times per second. * **_.deepClone**: This method is slower than the ES6 spread operator and FastClone, with around 282,218 executions per second. However, it provides a more robust cloning function for handling complex data structures. In summary, the benchmark highlights the trade-offs between different methods for creating deep clones of objects in JavaScript. The ES6 spread operator offers a simple and efficient solution for shallow copies, while Lodash's _.deepClone provides a more comprehensive cloning function for handling complex data structures.
Related benchmarks:
deep clone
Lodash cloneDeep vs JSON Clone vs Bitfish Simple Clone
JavaScript spread operator vs cloneDeep
Object.assign vs. JSON String/Parse vs deepclone
Comments
Confirm delete:
Do you really want to delete benchmark?