<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
var obj = {
"crossKey": "EURUSD",
"dayLowPrice": 1.13045,
"dayHighPrice": 1.13535,
"previousClosePrice": 1.13215,
"priceHist1": 107190404,
"priceHist2": 250587665,
"priceHist3": 765906410,
"priceHist4": 274925633,
"sparkline": 102925375,
"spotPrice": 1.1307,
"midPrice": 1.1307,
"precision": 4,
"percentChanged": -0.128,
"threeMonthForecast": 1.08,
"sixMonthForecast": 1.04,
"tradable": true,
"deliverable": true,
"key": "EURUSD",
"displayName": "EUR USD",
"symbolId": "EURUSD",
"objectId": 1,
"assetType": "fx",
"percentChange": -0.13,
"selected": true,
"lineChart": "9991581684158672254519078266440407",
"barChart": [9, 43, 92, 47, 41, 21, 75, 32, 51, 19, 56, 97, 89, 36, 70, 2, 83, 61, 88, 47, 31, 54],
"candleChart": "3869460804391469604270058742695196",
"midPriceModel": "Price: key EURUSD, rate 1.1307, precision 4, appendFrac false, => 1.13 07 ",
"spotPriceModel": "Price: key EURUSD, rate 1.1307, precision 4, appendFrac false, => 1.13 07 ",
"crossCurrencies": ["EUR", "USD"],
"unpackedSparkLine": {
"price": 2,
"priceDirection": 1,
"fiveMinHigh": 4,
"fiveMinLow": 0,
"spike": 0,
"scale": 30
},
"priceHistory": [3, 6, 7, 6, 4, 4, 7, 14, 31, 10, 16, 17, 22, 26, 13, 19, 15, 10, 8, 6, 6, 2, 2, 1]
};
angular.copy(obj);
angular.copy(obj, {}, 2);
_.clone(obj);
_.cloneDeep(obj);
JSON.parse(JSON.stringify(obj));
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Angular copy | |
Angular copy depth 2 | |
Lodash Clone | |
Lodash Deep Clone | |
To JSON and Back |
Test name | Executions per second |
---|---|
Angular copy | 480869.7 Ops/sec |
Angular copy depth 2 | 493231.9 Ops/sec |
Lodash Clone | 498929.9 Ops/sec |
Lodash Deep Clone | 208069.4 Ops/sec |
To JSON and Back | 240630.3 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
The provided JSON represents a benchmarking test case, where users can compare different approaches to create a copy of an object in JavaScript.
Benchmark Definition The benchmark definition specifies the JavaScript code that will be executed. In this case, we have four individual test cases:
angular.copy(obj);
- Angular's built-in copy
method.angular.copy(obj, {}, 2);
- Angular's copy
method with an optional depth parameter set to 2._.clone(obj);
- Lodash's clone
function._.cloneDeep(obj);
- Lodash's cloneDeep
function.These test cases compare the performance of different libraries (Angular and Lodash) in creating object copies.
Options Compared
The options compared are:
copy
methodcopy
method with an optional depth parameter set to 2clone
functioncloneDeep
functionThese options represent different approaches to creating object copies. The primary difference lies in the library used and, for Angular's copy
method, the presence or absence of a depth parameter.
Pros and Cons
Here's a brief summary of each option:
copy
method: Pros:copy
method with optional depth parameter: Pros:clone
function: Pros:cloneDeep
function: Pros:clone
due to optimized implementation
Cons:clone
(limited to deep copies)Browser Results The latest benchmark results show the performance of each test case on an Opera 112 browser:
Test Case | Execution Speed (per second) |
---|---|
Lodash Clone | 498929.875 |
Angular Copy Depth 2 | 493231.90625 |
Angular Copy | 480869.71875 |
To JSON and Back | 240630.296875 |
Lodash Deep Clone | 208069.390625 |
These results indicate that Lodash's clone
function is the fastest, followed closely by Angular's copy
method with an optional depth parameter.
Conclusion
The benchmarking test case provides a useful comparison of different approaches to creating object copies in JavaScript. While each option has its pros and cons, the results suggest that Lodash's clone
function and Angular's copy
method with adjustable depth are the most suitable choices for object copying tasks.