<script>
var arr1 = [];
var arr2 = [];
var arr3 = [];
</script>
arr1.push(Date.now());
if (arr1.length > 5) arr1.shift();
const newEntry = Date.now();
if (arr2.length < 5) {
arr2.push(newEntry);
} else {
for (let i = 1; i < 5; i++) {
arr2[i - 1] = arr2[i];
}
arr2[4] = newEntry;
}
const newEntry = Date.now();
if (arr3.length >= 5) arr3.splice(0, 1);
arr3 = [arr3, newEntry];
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
shift | |
manual | |
splice |
Test name | Executions per second |
---|---|
shift | 1127599.2 Ops/sec |
manual | 469410.4 Ops/sec |
splice | 798645.6 Ops/sec |
I'd be happy to help you understand the JavaScript microbenchmark, MeasureThat.net.
What is being tested?
MeasureThat.net tests three different approaches for removing elements from an array: shift
, splice
, and manual implementation (which we'll discuss in more detail later). The benchmark measures the execution time of each approach on a 5-element array filled with Date.now() values.
Options compared
The three options being compared are:
shift
: This method removes the first element from the end of the array and returns it. It's implemented as arr1.push(Date.now()); if (arr1.length > 5) arr1.shift();
.const newEntry = Date.now(); if (arr2.length < 5) { arr2.push(newEntry); } else { for (let i = 1; i < 5; i++) { arr2[i - 1] = arr2[i]; } arr2[4] = newEntry; }
.splice
: This method removes a specified number of elements from the array and returns them as an array. It's implemented as const newEntry = Date.now(); if (arr3.length >= 5) arr3.splice(0, 1); arr3 = [...arr3, newEntry];
.Pros and Cons
Here are some pros and cons for each approach:
shift
: Pros: Simple to implement, likely to be fast since it only involves a single operation. Cons: May not be the most efficient way to remove elements from an array, as it requires shifting all remaining elements down.shift
due to the loop overhead.splice
: Pros: Fast and efficient since it uses a native method that's implemented in C++. Cons: May incur additional overhead if not used carefully, as it requires creating an array copy.Library and special JS features
In this benchmark, no libraries or special JavaScript features are explicitly mentioned. However, Date.now()
is used to populate the arrays with values, which is a common pattern in JavaScript benchmarks.
Considerations
When choosing between these approaches, consider the specific use case and performance requirements of your application. If you need to remove elements from an array frequently, shift
or manual implementation might be suitable. However, if you need to remove a large number of elements or require high performance, splice
is likely the best choice.
Other alternatives
If you're looking for alternative approaches to removing elements from an array in JavaScript, consider:
array.prototype.slice()
: A more modern alternative to shift
, which creates a new array with the desired elements.filter()
: A method that creates a new array with elements that pass a test (in this case, no elements).map()
and reduce()
: Methods that can be used in combination to create a new array with the desired elements.Keep in mind that these alternatives may have different performance characteristics compared to shift
, splice
, or manual implementation, so consider your specific use case when choosing an approach.