Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array Move approaches v3
(version: 3)
Array move with reduce
Comparing performance of:
move with splice vs move with reduce and push vs move with reduce and spread
Created:
6 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
var pages = [{a:1}, {a:2}, {a:3},{a:4}]; function movePageSplice(pages, fromIndex, toIndex) { const arr = [...pages]; var element = arr[fromIndex]; arr.splice(fromIndex, 1); arr.splice(toIndex, 0, element); return arr } function movePageReduceSpread(pages, fromIndex, toIndex) { const correctedToIndex = fromIndex < toIndex ? toIndex + 1 : toIndex; return pages.reduce((memo, item, index, arr)=>{ if (index === correctedToIndex) { return [...memo, arr[fromIndex], item]; } else if(index !== fromIndex){ return [...memo, item]; } return memo; },[]) } function movePageReducePush(pages, fromIndex, toIndex) { const correctedToIndex = fromIndex < toIndex ? toIndex + 1 : toIndex; return pages.reduce((memo, item, index, arr)=>{ if (index === correctedToIndex) { memo.push(arr[fromIndex], item) } else if(index !== fromIndex){ memo.push(item) } return memo },[]) } console.log(movePageSplice(pages, 2, 0), 'movePageSplice') console.log(movePageSplice(pages, 0, 2), 'movePageSplice') console.log(movePageReduceSpread(pages, 2, 0), 'movePageReduceSpread') console.log(movePageReduceSpread(pages, 0, 2), 'movePageReduceSpread') console.log(movePageReducePush(pages, 2, 0), 'movePageReducePush') console.log(movePageReducePush(pages, 0, 2), 'movePageReducePush')
Tests:
move with splice
movePageSplice(pages, 2, 0)
move with reduce and push
movePageReducePush(pages, 2, 0)
move with reduce and spread
movePageReduceSpread(pages, 2, 0)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
move with splice
move with reduce and push
move with reduce and spread
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):
Let's break down the provided JSON data to understand what's being tested in this JavaScript microbenchmark. **Benchmark Overview** The benchmark is designed to measure the performance of three different approaches for moving an element from one position to another in an array: 1. `movePageSplice`: using the `splice()` method. 2. `movePageReduceSpread`: using the `reduce()` method with the spread operator (`...`). 3. `movePageReducePush`: using the `reduce()` method with `push()`. **Options Compared** Each approach has a different implementation, which affects performance: * `movePageSplice`: This method modifies the original array by removing the element at the `fromIndex` position and inserting it at the `toIndex` position. This approach is simple but can be slow for large arrays. * `movePageReduceSpread`: This method creates a new array using the spread operator (`...`) to copy the elements before the `fromIndex`. It then uses `reduce()` to combine the element to be moved with the remaining elements. This approach avoids modifying the original array and can be more efficient. * `movePageReducePush`: Similar to `movePageReduceSpread`, but it uses `push()` instead of spreading the array. This approach also creates a new array but might have slightly different performance characteristics. **Pros and Cons** Here's a brief summary of each approach: * `movePageSplice`: + Pros: Simple, easy to understand. + Cons: Can be slow for large arrays due to modifying the original array. * `movePageReduceSpread`: + Pros: Avoids modifying the original array, can be more efficient. + Cons: Might have higher overhead due to creating a new array with the spread operator. * `movePageReducePush`: + Pros: Similar to `reduceSpread`, but might have lower overhead due to using `push()` instead of spreading the array. + Cons: Still creates a new array, which can be slower for very large arrays. **Library and Special JS Features** In this benchmark, no specific library is used. However, the `reduce()` method is a built-in JavaScript function that's commonly used in many frameworks and libraries. There are no special JavaScript features being tested or used beyond the standard `reduce()`, `push()`, `splice()`, and spread operator (`...`) syntax. **Other Alternatives** If you're interested in exploring other approaches, here are some alternatives: * Using a library like Lodash, which provides a `move()` function that can be more efficient than the built-in methods. * Implementing a custom solution using a different data structure, such as an array with indices instead of actual values. Keep in mind that these alternatives might not be relevant to this specific benchmark and may have their own trade-offs.
Related benchmarks:
Move item in first place spread vs unshift
Move item in first place unshift vs spread
Slice vs Splice vs Shift (Large Array)
Slice vs Splice vs Shift (More itemsToRemove)
Slice vs Splice vs Shift in cycle
Comments
Confirm delete:
Do you really want to delete benchmark?