<select>
<option value="Strawberry">Strawberry</option>
<option value="Blueberry">Blueberry</option>
<option value="Peach">Peach</option>
<option value="Pomegranate">Pomegranate</option>
<option value="Grape">Grape</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Pineapple">Pineapple</option>
<option value="Pear">Pear</option>
<option value="Plum">Plum</option>
<option value="Muskmelon">Muskmelon</option>
<option value="Avocado">Avocado</option>
<option value="Apricot">Apricot</option>
<option value="Mango">Mango</option>
<option value="Apple">Apple</option>
<option value="Papaya">Papaya</option>
<option value="Lemon">Lemon</option>
<option value="Coconut">Coconut</option>
<option value="Jackfruit">Jackfruit</option>
<option value="Nectarine">Nectarine</option>
<option value="Strawberry">Strawberry</option>
<option value="Blueberry">Blueberry</option>
<option value="Peach">Peach</option>
<option value="Pomegranate">Pomegranate</option>
<option value="Grape">Grape</option>
<option value="Green Banana">Green Banana</option>
<option value="Cherry">Cherry</option>
<option value="Pineapple">Pineapple</option>
<option value="Pear">Pear</option>
<option value="Plum">Plum</option>
<option value="Muskmelon">Muskmelon</option>
<option value="Avocado">Avocado</option>
<option value="Apricot">Apricot</option>
<option value="Mango">Mango</option>
<option value="Apple">Apple</option>
<option value="Papaya">Papaya</option>
<option value="Lemon">Lemon</option>
<option value="Coconut">Coconut</option>
<option value="Jackfruit">Jackfruit</option>
<option value="Nectarine">Nectarine</option>
</select>
const selectElement = document.querySelector('select');
let selectedIndex = -1;
for (let i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value === 'Green Banana') {
selectedIndex = i;
break;
}
}
const selectElement = document.querySelector('select');
const selectedIndex = [selectElement.options].findIndex(o => o.value === 'Green Banana');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
For..Loop | |
FindIndex |
Test name | Executions per second |
---|---|
For..Loop | 602641.7 Ops/sec |
FindIndex | 582203.4 Ops/sec |
What is being tested:
MeasureThat.net is testing the performance of two approaches to find the index of an option in a select
element:
for
loop to iterate through each option in the select
element and checks if the value matches 'Green Banana'
. If it does, the index is stored in the selectedIndex
variable.'Green Banana'
) in the array of options.Options compared:
The two approaches are being compared to determine which one is faster for finding the index of an option in a select
element.
Pros and Cons:
findIndex
.for
loop if the array is very small.Library usage:
In both test cases, no libraries are used. The findIndex()
method is a built-in JavaScript method that searches for an element in an array and returns its index.
Special JS features or syntax:
There is no special JS feature or syntax being tested in these examples. They use standard JavaScript constructs like for
loops, arrays, and the querySelector()
method to manipulate the DOM.
Other alternatives:
If you were to implement this benchmark from scratch, other approaches could be:
Keep in mind that these alternatives may not provide significant performance gains, and the existing approaches using findIndex()
and traditional looping should be sufficient for most use cases.