<script>
var array = [];
for(let i = 0; i < 1000; i++) {array[i] = i;}
</script>
/* these functions assume that only one element matches, so they do not loop! */
function deleteBySplice (array, element) {
var index = array.indexOf( element );
if (index !== -1) {
array.splice( index, 1 );
}
}
function deleteByCopyWithin (array, element) {
var index = array.indexOf( element );
if (index !== -1) {
array.copyWithin( index, index + 1 );
--array.length;
}
}
function deleteByFilter (array, element) {
array = array.filter( el => el !== element );
}
deleteBySplice( array, 21 );
deleteBySplice( array, 304 );
deleteBySplice( array, 777 );
deleteByCopyWithin( array, 21 );
deleteByCopyWithin( array, 304 );
deleteByCopyWithin( array, 777 );
deleteByFilter( array, 21 );
deleteByFilter( array, 304 );
deleteByFilter( array, 777 );
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Delete by Splice | |
Delete by copyWithin | |
Delete by Filter |
Test name | Executions per second |
---|---|
Delete by Splice | 283760.3 Ops/sec |
Delete by copyWithin | 284425.8 Ops/sec |
Delete by Filter | 41340.5 Ops/sec |
I'll do my best to explain the benchmark and its results.
Benchmark Overview
The benchmark measures the performance of three different methods for deleting an element from an array:
deleteBySplice
: Uses splice()
method to remove the element at the specified index.deleteByCopyWithin
: Uses copyWithin()
method to shift all elements after the target index one position forward, effectively removing the element at the target index.deleteByFilter
: Uses filter()
method to create a new array that excludes the specified element.Options Comparison
The three methods have different performance characteristics:
deleteBySplice
is generally considered the fastest approach because it only requires a single array modification operation. However, it has a higher overhead due to the need to find the target index using indexOf()
.deleteByCopyWithin
is slower than deleteBySplice
, but can be faster for larger arrays because it avoids the overhead of finding the target index.deleteByFilter
is typically the slowest approach because it creates a new array, which involves additional memory allocation and copying.Pros and Cons
deleteBySplice
:indexOf()
, which can be slower for large arrays.deleteByCopyWithin
:deleteBySplice
due to copying elements after the target index.deleteByFilter
:Library Use
None of the test cases use any external libraries. The functions are implemented directly in JavaScript.
Special JS Features or Syntax
The benchmark does not include any special features or syntax that would affect its results. It only tests the performance of basic array operations.
Other Alternatives
If you're interested in exploring other approaches, here are some alternatives:
deleteByMap
: Uses a Map to store indices and remove elements.deleteBySet
: Uses a Set to store unique elements and remove duplicates.deleteBySortAndSlice
: Sorts the array before deleting elements using sort()
and then uses slicing to create a new array.Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the original three methods.