<script>https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.js</script>
var data = [{a: 1}, {a: 2}, {a: 3}, {a: 4}, {a: 5}, {a: 6}, {a: 7}, {a: 8}, {a: 1}];
data.filter((v, i, a) => a.findIndex(t => t.a === v.a) === i)
_.uniqBy(data, 'a');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
js | |
lodash |
Test name | Executions per second |
---|---|
js | 1625066.5 Ops/sec |
lodash | 447325.1 Ops/sec |
Let's dive into what's being tested here.
Benchmark Name: "get uniq values js" (a.k.a. getting unique values in JavaScript)
Description: This benchmark compares two approaches to get unique values from an array: one using vanilla JavaScript and the other using the _.uniqBy
function from Lodash library.
Test Case 1: Vanilla JS
The first test case uses the following code:
data.filter((v, i, a) => a.findIndex(t => t.a === v.a) === i)
Here's what's happening:
data
containing objects with an "a" property.filter()
method is used to create a new array with only the unique values from data
.filter()
uses findIndex()
to search for the index of the first occurrence of each value in the original array. If it's not found (i.e., the value is unique), findIndex()
returns -1
, and we include that element in the new array.Test Case 2: Lodash
The second test case uses the following code:
_.uniqBy(data, 'a');
Here's what's happening:
_.uniqBy
function from Lodash to get an array of unique values from data
.data
, and the second argument 'a'
specifies that we want to consider only the "a" property when determining uniqueness.Benchmark Results
The latest benchmark results show the execution time (Executions Per Second) for both test cases on a Chrome Mobile 94 browser:
These results indicate that the vanilla JavaScript implementation is significantly faster than the Lodash version.
Pros and Cons
Vanilla JS:
Pros:
Cons:
filter()
and findIndex()
methodsLodash:
Pros:
Cons:
Other Alternatives
If you're not using Lodash or want alternative approaches, consider these options:
Set
: Create a Set
object from the array and then convert it back to an array using the spread operator (...
). This approach is concise and efficient.const uniqueValues = [...new Set(data.map(x => x.a))];
.map()
and .reduce()
:Use map()
to create a new array with the same elements as the original, but then use reduce()
to eliminate duplicates:
data.map((x) => ({ a: x.a })).reduce((acc, current) => {
if (!acc.find(t => t.a === current.a)) acc.push(current);
return acc;
}, []);
These alternatives have their own trade-offs and may not be as performant or readable as the original Lodash example. However, they demonstrate different approaches to solving the same problem.
Library:
Lodash is a popular JavaScript library that provides utility functions for common tasks like data manipulation, string handling, and more. The _.uniqBy
function is part of the "Arrays" module in Lodash.
That's it! I hope this explanation helps you understand what's being tested here and provides valuable insights into different approaches to solving a common JavaScript problem.