Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
spread vs slice vs splice
(version: 0)
Comparing performance of:
spread vs slice vs splice
Created:
7 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array = Array.from({ length: 100 }).map((val, i) => i);
Tests:
spread
var newArray = [...array];
slice
var newArray = array.slice();
splice
var newArray = array.splice();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
spread
slice
splice
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0
Browser/OS:
Chrome 144 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624816" width="100%" height="500px"></iframe>
slice
42.1M/s
splice
40.7M/s
spread
34.9M/s
View exact numbers
Test name
Executions per second
✓
slice
42,115,468 Ops/sec
splice
40,706,748 Ops/sec
spread
34,905,152 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and explain what's being tested, compared options, pros/cons, library usage, special JS features, and alternative approaches. **Benchmark Overview** The test compares three ways to create a new array from an existing one: 1. **Spread Operator (`...`)**: Using the spread operator to copy elements from the original array. 2. **Array Slice (`array.slice()`)**: Creating a shallow copy of the original array using `slice`. 3. **Array Splice (`array.splice()`)**: Modifying the original array and then creating a new one with the modified elements. **Library Usage** There is no explicit library mentioned in the benchmark definition or test cases. However, it's worth noting that some browsers might have additional libraries or extensions that could influence the results, but this is not relevant to the specific test cases presented. **Special JS Features** None of the special JavaScript features are explicitly mentioned or used in the benchmark. The tests focus on basic array operations using standard syntax. **Options Comparison** Here's a brief overview of each option: 1. **Spread Operator (`...`)**: * Pros: Efficient, concise, and modern way to create a new array. * Cons: Might be slower due to its syntactic sugar, and some older browsers might not support it. 2. **Array Slice (`array.slice()`)**: * Pros: Widely supported across most browsers and environments. * Cons: Can be less efficient than the spread operator, especially for large arrays. 3. **Array Splice (`array.splice()`)**: * Pros: Creates a new array with modified elements, which can be useful in certain scenarios. * Cons: Modifies the original array, which might not be desirable, and can be slower due to its additional overhead. **Benchmark Results** The latest benchmark results show that: 1. **Spread Operator (`...`)**: The fastest execution rate (8077417.0 executions/second). 2. **Array Slice (`array.slice()`)**: Middle-paced execution rate (4324035.0 executions/second). 3. **Array Splice (`array.splice()`)**: Slowest execution rate (3717745.75 executions/second). **Alternative Approaches** Other approaches to create a new array from an existing one include: 1. `concat()`: The older, more traditional way to concatenate arrays. 2. `Array.from()`: A modern method to create an array from an iterable, which might be faster than the spread operator in some cases. However, these alternatives are not tested in this specific benchmark, and their performance would depend on various factors, such as the browser's implementation, the size of the input arrays, and other optimizations.
Related benchmarks
Slice & Splice vs ES6 Array Spread
Splice vs Spread vs Unshift to insert at beginning of array (fixed from slice)
Comments
Confirm delete:
Do you really want to delete benchmark?