Run results for: Remove array items: FindIndex + Splice vs Filter

Run details:

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

Browser: Chrome 119

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Filter 10	4546297.0 Ops/sec
Filter 100	88724.8 Ops/sec
Filter 1000	254.1 Ops/sec
Filter 10000	2.7 Ops/sec
FindIndex + Splice 10	9992292.0 Ops/sec
FindIndex + Splice 100	5037217.0 Ops/sec
FindIndex + Splice 1000	835766.9 Ops/sec
FindIndex + Splice 10000	53878.2 Ops/sec

Script Preparation code:

function createObjectsArray(size) {
  return Array.from({ length: size }, (_, i) => ({ id: i + 1 }));
}

function generateRandomArray(size) {
  const arr = Array.from({ length: size }, (_, i) => i + 1);
  return arr.sort(() => Math.random() - 0.5);
}

function removeWithFilter(array, ids) {
  ids.forEach((id) => {
    array = array.filter((item) => item.id !== id);
  });
}

function removeWithFindIndexAndSplice(array, ids) {
  ids.forEach((id) => {
    const index = array.findIndex((item) => item.id === id);
    if (index !== -1) array.splice(index, 1);
  });
}

var testSize1 = 10;
var testSize2 = 100;
var testSize3 = 1000;
var testSize4 = 10000;

var randomIds1 = generateRandomArray(testSize1);
var randomIds2 = generateRandomArray(testSize2);
var randomIds3 = generateRandomArray(testSize3);
var randomIds4 = generateRandomArray(testSize4);

var func1Array1 = createObjectsArray(testSize1);
var func1Array2 = createObjectsArray(testSize2);
var func1Array3 = createObjectsArray(testSize3);
var func1Array4 = createObjectsArray(testSize4);

var func2Array1 = createObjectsArray(testSize1);
var func2Array2 = createObjectsArray(testSize2);
var func2Array3 = createObjectsArray(testSize3);
var func2Array4 = createObjectsArray(testSize4);

Tests:

Filter 10
removeWithFilter(func1Array1, randomIds1)
Filter 100
removeWithFilter(func1Array2, randomIds2)
Filter 1000
removeWithFilter(func1Array3, randomIds3)
Filter 10000
removeWithFilter(func1Array4, randomIds4)
FindIndex + Splice 10
removeWithFindIndexAndSplice(func2Array1, randomIds1)
FindIndex + Splice 100
removeWithFindIndexAndSplice(func2Array2, randomIds2)
FindIndex + Splice 1000
removeWithFindIndexAndSplice(func2Array3, randomIds3)
FindIndex + Splice 10000
removeWithFindIndexAndSplice(func2Array4, randomIds4)

Run results for: Remove array items: FindIndex + Splice vs Filter

Compare array item removal methods.

Filter 10

Filter 100

Filter 1000

Filter 10000

FindIndex + Splice 10

FindIndex + Splice 100

FindIndex + Splice 1000

FindIndex + Splice 10000