<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> </head> <body> </body></html>var origArr = [ { name : "obj1", val : 1, color : "blue" }, { name : "obj2", val : 2, color : "red" }, { name : "obj3", val : 3, color : "green" }, { name : "obj4", val : 4, color : "orange" }];var newArr = [];newArr = angular.copy(origArr);newArr = JSON.parse(JSON.stringify(origArr));newArr = _.cloneDeep(origArr);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| angular.copy() | |
| JSON.parse(JSON.stringify()) | |
| _.colneDeep() |
| Test name | Executions per second |
|---|---|
| angular.copy() | 606540.1 Ops/sec |
| JSON.parse(JSON.stringify()) | 279215.8 Ops/sec |
| _.colneDeep() | 330022.2 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Definition
The benchmark is designed to measure the performance differences between three methods: angular.copy(), JSON.parse(JSON.stringify()), and _.cloneDeep() (which seems to be a typo, it should be _cloneDeep).
Test Case Breakdown
angular.copy(origArr): This method is used to create a deep copy of the original array origArr. In JavaScript, arrays are objects, and when you assign an array to a new variable, you're not creating a new object, but rather referencing the same one. Therefore, any changes made to the new array will also affect the original array.
JSON.parse(JSON.stringify(origArr)): This method is used to create a deep copy of the original array origArr. The JSON.stringify() function converts an object to a JSON string, and then JSON.parse() parses that string back into an object. However, since arrays are not directly serializable in JSON, this method actually creates a shallow copy, which means it only copies the references to the elements in the array, not the elements themselves.
_.cloneDeep(origArr): This method is used to create a deep copy of the original array origArr. The underscore library provides various utility functions for copying objects and arrays, including _cloneDeep(). This method will recursively create new copies of all nested objects and arrays.
Options Compared
In this benchmark, we have three options:
JSON.parse(JSON.stringify(origArr)) creates a shallow copy of the array by only copying the references to the elements.angular.copy(origArr) and _.cloneDeep(origArr) create deep copies of the array by recursively creating new copies of all nested objects and arrays.Pros and Cons
JSON.parse(JSON.stringify(origArr))):angular.copy(origArr) and _.cloneDeep(origArr)):Library
_cloneDeep(): The underscore library provides various utility functions for copying objects and arrays. _cloneDeep() is used in this benchmark to create a deep copy of the original array origArr.Special JS Feature or Syntax
There is no special JS feature or syntax being tested in this benchmark.
Alternatives
Other alternatives for creating copies of arrays include:
slice(): Creates a shallow copy of an array by returning a new array with references to the same elements.concat(): Creates a shallow copy of an array by concatenating the original array with a new array.Object.assign(): Creates a shallow copy of an object (not specifically designed for arrays, but can be used in some cases).It's worth noting that these alternatives may not provide the same level of data integrity as angular.copy() or _cloneDeep(), especially when working with complex objects and arrays.
