<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js'></script>
arrayOf100kobjects = new Array(100000).fill(1).map((_,index) => ({a: index}));
const clonedArr = [].concat(arrayOf100kobjects);
const clonedArr = [arrayOf100kobjects];
const clonedArr = arrayOf100kobjects.slice();
const clonedArr = Object.values(arrayOf100kobjects);
const clonedArr = Array.from(arrayOf100kobjects);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
1. concat | |
2. spread | |
3. slice | |
5. Object values | |
6. Array.from |
Test name | Executions per second |
---|---|
1. concat | 3897.5 Ops/sec |
2. spread | 3664.8 Ops/sec |
3. slice | 3998.0 Ops/sec |
5. Object values | 2588.7 Ops/sec |
6. Array.from | 3916.5 Ops/sec |
Let's break down the provided JSON and explore what's being tested, compared, and analyzed in the benchmark.
Benchmark Definition
The benchmark is designed to compare different methods for creating a shallow clone of an array of objects. The test cases are focused on four specific approaches:
concat()
...
)slice()
Object.values()
(not applicable to arrays, but used in the benchmark)Array.from()
The script preparation code creates a large array of 100,000 objects with unique indices as properties.
Options Compared
Here's a brief overview of each option and their pros and cons:
concat()
: Concatenates an existing array to create a new one. Pros: simple and widely supported. Cons: can be slower than other methods....
): Creates a shallow clone by spreading the original array into a new one. Pros: concise and efficient. Cons: may not work as expected with nested objects or arrays.slice()
: Returns a shallow copy of a portion of an array. Pros: flexible and can be used to create clones of parts of arrays. Cons: requires careful consideration of bounds.Object.values()
: Returns an array containing the values of an object's enumerable properties. This method is not applicable to arrays, as it would return a single value (the length of the array) instead of an array.Library Used
The benchmark uses Lodash, a popular JavaScript utility library. The Object.values()
function is part of Lodash.
Special JS Feature or Syntax
There's no special feature or syntax being tested in this benchmark. However, it's worth noting that some older browsers might not support the spread syntax (...
).
Other Alternatives
If you wanted to compare other methods for creating a shallow clone, you could consider:
Array.prototype.slice()
with careful consideration of boundsArray.prototype.map()
with an identity functionKeep in mind that each method has its trade-offs and might be more or less suitable depending on the specific use case.
Benchmark Analysis
The benchmark result shows the performance differences between the four tested methods. The results indicate that:
slice()
is generally the fastest option...
) is close to slice()
concat()
is slower than both slice()
and spread syntaxObject.values()
is significantly slower, likely due to its inapplicability to arraysThese results can help developers choose an efficient method for creating shallow clones of arrays of objects.