Benchmark: pull objects from array by ids from another array

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var arr1 = [];
var arr2 = [];
var obj3 = {}

function generateUUID() { // Public Domain/MIT
    var d = new Date().getTime();//Timestamp
    var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16;//random number between 0 and 16
        if(d > 0){//Use timestamp until depleted
            r = (d + r)%16 | 0;
            d = Math.floor(d/16);
        } else {//Use microseconds since page-load if supported
            r = (d2 + r)%16 | 0;
            d2 = Math.floor(d2/16);
        }
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
}

for (i = 0; i < 10000; i++) {
  const id = generateUUID();
  var obj = {
     id,
     name: Math.random().toString(36).substr(2, 5)
  };
  arr1.push(id);
  arr2.push(obj)
  obj[id] = 1
}

var set = new Set(arr1)

Tests:

map + find
arr1.map(issuer => arr2.find(d => d.id === issuer))
filter + obj
arr2.filter(a => obj3[a.id])
filter + Set
arr2.filter(obj => set.has(obj.id));
filter + onj
arr2.filter(obj => obj3[obj.id]);
filter + include
arr2.filter(x => arr1.includes(x.id))
filter + indexOf
arr2.filter(function(i){ return arr1.indexOf(i.id) === -1; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map + find
filter + obj
filter + Set
filter + onj
filter + include
filter + indexOf

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its test cases, explaining what's being tested, the different approaches, their pros and cons, and any notable libraries or special JavaScript features used.

**Benchmark Overview**

The benchmark measures the performance of filtering arrays in various ways using two input arrays: `arr1` and `arr2`. The goal is to find elements in `arr2` that match certain conditions, which are represented by the functions passed to the `filter()` method.

**Test Cases**

There are six test cases:

1. **map + find**: Maps each element in `arr1` to a value in `arr2` and finds the matching element using `find()`.
2. **filter + obj**: Filters `arr2` based on the existence of a property with a specific key (`obj3`) that matches an element's ID.
3. **filter + Set**: Filters `arr2` based on whether an element's ID is present in a Set (`set`) created from `arr1`.
4. **filter + onj** (Note: This seems to be a typo, and it should likely be "obj"): Similar to the previous one but uses `obj3[obj.id]` instead of `obj3[a.id]`.
5. **filter + include**: Filters `arr2` based on whether an element's ID is present in `arr1` using the `includes()` method.
6. **filter + indexOf**: Filters `arr2` by checking if an element's ID is not found in `arr1` using the `indexOf()` method.

**Approaches**

Each test case uses a different approach to filter the elements in `arr2`. The main differences are:

* Using `find()`, `includes()`, and `indexOf()` methods, which involve searching for a specific element in one of the arrays.
* Using object property access (`obj3[obj.id]`) or Set membership checks (`set.has(obj.id)`), which require accessing the elements' properties directly.

**Libraries**

The benchmark uses Lodash's `filter` function, which is imported from a CDN.

**Special JavaScript Features**

None are explicitly mentioned in this benchmark. However, some of these test cases rely on features like Set membership checks (`set.has(obj.id)`) and object property access (`obj3[obj.id]`), which may require modern JavaScript environments with support for those features.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **map + find**: This approach can be efficient if the search space is small, but it requires creating intermediate arrays, which can lead to memory allocation issues.
2. **filter + obj**: This approach is straightforward and can be efficient if the object property access is fast enough.
3. **filter + Set**: Using a Set for membership checks can be faster than using object property access or `find()` methods, especially for large datasets.
4. **filter + onj** (or `obj`): Similar to the previous one but with a potential performance hit due to slower object property access.
5. **filter + include**: This approach is slow because it requires searching through an entire array to check membership.
6. **filter + indexOf**: This approach can be fast if the search space is small, but it may lead to unnecessary iterations for larger datasets.

**Benchmark Performance**

The benchmark provides execution times for each test case, which indicates that:

* `map + find` is the slowest due to its memory-intensive nature.
* `filter + Set` and `filter + obj` are relatively fast due to optimized membership checks.
* The other approaches are slower due to their respective performance characteristics.

Keep in mind that these results may vary depending on the specific JavaScript environment, hardware, and version used.

Related benchmarks:

pull objects from array by ids from another array (version: 1)

Comparing performance of: map + find vs filter + obj vs filter + Set vs filter + onj vs filter + include vs filter + indexOf

Created: 3 years ago by: Registered User

Jump to the latest result

map + find

filter + obj

filter + Set

filter + onj

filter + include

filter + indexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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