Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
shallow clone array
(version: 0)
Comparing performance of:
Splice vs Slice vs Concat vs Spread vs For-i vs For-of vs While vs From vs Lodash
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Tests:
Splice
const testArray = [1, 2, 3]; const newTestArray = testArray.splice(0);
Slice
const testArray = [1, 2, 3]; const newTestArray = testArray.slice();
Concat
const testArray = [1, 2, 3]; const newTestArray = testArray.concat();
Spread
const testArray = [1, 2, 3]; const newTestArray = [...testArray];
For-i
const testArray = [1, 2, 3]; const newTestArray = []; for (let i = 0; i < testArray.length; i++) { newTestArray[i] = testArray[i]; }
For-of
const testArray = [1, 2, 3]; const newTestArray = []; for (const value of testArray) { newTestArray[i] = value; }
While
const testArray = [1, 2, 3]; const newTestArray = []; let i = -1; while (++i < testArray.length) { newTestArray[i] = testArray[i]; }
From
const testArray = [1, 2, 3]; const newTestArray = Array.from(testArray);
Lodash
const testArray = [1, 2, 3]; const newTestArray = _.clone(testArray);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (9)
Previous results
Fork
Test case name
Result
Splice
Slice
Concat
Spread
For-i
For-of
While
From
Lodash
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):
Measuring the performance of different JavaScript methods for cloning arrays is an essential task, especially in modern web development where array manipulation is common. **Overview of Tested Methods** The benchmark tests six different approaches to clone an array: 1. **Splice**: Removing elements from the original array and returning a new array with the same elements. 2. **Slice**: Creating a shallow copy of the original array using the `slice()` method. 3. **Concat**: Concatenating an empty array with the original array to create a new array. 4. **Spread**: Using the spread operator (`...`) to create a new array from the original array. 5. **For-i**: Iterating over the original array's indices and assigning values to a new array using a `for` loop. 6. **For-of**: Iterating over the original array's elements using a `for...of` loop. **Pros and Cons of Each Approach** 1. **Splice**: This method is simple but has the disadvantage of modifying the original array, which may affect other parts of the code that rely on its integrity. 2. **Slice**: Creating a shallow copy of the array is efficient and widely supported. However, it does not create a deep copy, which might be undesirable for objects within the array. 3. **Concat**: This method creates a new array by concatenating an empty array with the original one, resulting in a new object that consumes more memory than necessary. It also modifies the original array. 4. **Spread**: The spread operator is concise and efficient but may not work as expected if the array contains non-primitive values (e.g., objects). 5. **For-i**: This method can be slow due to the use of a `for` loop, which iterates over indices instead of values. 6. **For-of**: Similar to `For-i`, this method uses a `for...of` loop but is generally faster and more memory-efficient. **Other Considerations** * For arrays containing only primitive values (e.g., numbers, strings), all methods are relatively fast and efficient. * For arrays with nested objects or other complex data structures, using the spread operator or `slice()` method can lead to performance issues due to unnecessary object creations. * When working with large datasets, caching the results of array cloning operations can help improve performance. **Conclusion** The choice of array cloning method depends on the specific requirements and constraints of your project. If you need a simple, widely supported solution, `slice()` or the spread operator might be suitable. For more complex data structures or high-performance scenarios, considering alternative methods like using `Array.prototype.map()` or implementing a custom cloning function could provide better results. It's also worth noting that modern JavaScript engines have significant optimizations for array operations, which can impact performance in unexpected ways. Therefore, experimenting with different approaches and profiling the code can help you find the most efficient method for your specific use case.
Related benchmarks:
Spread Operator vs Lodash Small Array
Clone deep
Spread Operator vs Lodash CloneDeep
Spread Operator vs Lodash (v4.17.21)
Array From vs lodash clone
Comments
Confirm delete:
Do you really want to delete benchmark?