Benchmark: filter vs splice and indexOf

Tests:

Filter
let array = [1,2,3,4,5,6,7,8] const toFilter = [2,4,7] array = array.filter(item => !toFilter.includes(item));
Splice
let array = [1,2,3,4,5,6,7,8] const toRemove = [2,4,7] for (const removeable of toRemove) { const index = array.indexOf(removeable); if (index > 0) array.splice(index,1); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter
Splice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Filter	24557768.0 Ops/sec
Splice	13945260.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to delete elements from an array: using `filter()` method and using `splice()` method with `indexOf()`. The goal is to determine which approach is faster.

**Options Being Compared**

There are two options being compared:

1. **Filter Method**: This involves creating a new array with only the elements that do not match the filter criteria.
2. **Splice Method with indexOf()**: This involves iterating over the array and using `indexOf()` to find the index of each element to be deleted, then using `splice()` to remove the element at that index.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Filter Method**:
	* Pros: Efficient, as it only requires iterating over the array once.
	* Cons: Creates a new array, which can be memory-intensive for large arrays.
2. **Splice Method with indexOf()**:
	* Pros: Does not create a new array, so it's more memory-efficient for large arrays.
	* Cons: Requires iterating over the array multiple times to find all elements to delete.

**Library and Special JS Features**

In this benchmark, the `filter()` method is used as a built-in JavaScript function. There are no external libraries or special JS features being tested.

**Other Considerations**

Another approach that could be considered for deleting elements from an array is using `map()` followed by `splice()`, like this:
```javascript
array = array.map(item => item === toFilter[0] ? undefined : item);
array.splice(0, array.length - (array.filter(x => x !== undefined).length));
```
However, this approach has the same issue as the filter method: it creates a new array.

**Alternatives**

Some other approaches that could be considered for deleting elements from an array include:

1. **Using `forEach()`**: Similar to the splice method, but with `forEach()`, you would need to call `thisArg` and keep track of indices separately.
2. **Using `reduce()`**: Another way to remove elements from an array is by using `reduce()` with a callback function that removes elements based on a condition.
3. **Using `Array.prototype.forEach()` and `indexOf()` in combination**: Instead of using `splice()`, you could use `forEach()` and `indexOf()` together to achieve similar results.

Keep in mind that these alternatives may have varying performance characteristics, and the benchmark would need to be adjusted accordingly to test them effectively.

Related benchmarks:

filter vs splice and indexOf (version: 0)

See if filter is faster than splice method for deletion

Comparing performance of: Filter vs Splice

Created: 2 years ago by: Guest

Jump to the latest result

Filter

Splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):