<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
var myArr = Array.from({
length: 16000
}, () => ({ value: Math.floor(Math.random() * 1000) }));
var myCopy = null;
myCopy = _.uniqBy(myArr, 'value').map(({ value }) => value);
myCopy = [new Set(myArr.map(({ value }) => value))]
var seen = {};
var out = [];
const len = myArr.length;
var j = 0;
for (var i = 0; i < len; i += 1) {
var item = myArr[i].value;
if (seen[item] !== 1) {
seen[item] = 1;
out[j++] = item;
}
}
myCopy = out;
var result = [];
myArr.forEach((item) => {
if (result.indexOf(item.value) < 0) {
result.push(item.value);
}
});
myCopy = result;
var mapMyArr = myArr.map(({ value }) => value);
myCopy = mapMyArr.filter((value, index, array) => array.indexOf(value) === index);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash uniqBy | |
new Set() Destructuring | |
uniq for loop | |
uniq by forEach | |
uniq by filter |
Test name | Executions per second |
---|---|
Lodash uniqBy | 5564.6 Ops/sec |
new Set() Destructuring | 3309.5 Ops/sec |
uniq for loop | 19750.3 Ops/sec |
uniq by forEach | 1018.5 Ops/sec |
uniq by filter | 607.0 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Description
The benchmark tests four different approaches to remove duplicates from an array of objects while preserving the original order:
uniqBy
: Uses Lodash's uniqBy
function, which removes duplicate elements from an array based on a unique function.new Set()
with Array destructuring: Uses a Set
data structure to remove duplicates and then uses array destructuring to create a new array.forEach()
with indexOf()
: Iterates through the array using forEach()
and checks if an element is already present in the array using indexOf()
.Options Compared
The four options are compared in terms of their performance, efficiency, and readability.
uniqBy
: Pros: concise, readable, and easy to use. Cons: may not be as efficient as other approaches.new Set()
with Array destructuring: Pros: efficient, straightforward, and easy to understand. Cons: requires a slight learning curve for those unfamiliar with sets.forEach()
with indexOf()
: Pros: concise, readable. Cons: may not be as efficient as other approaches.Libraries and Special JS Features
The benchmark uses Lodash's uniqBy
function, which is a utility library that provides a simple way to remove duplicates from an array based on a unique function.
There are no special JavaScript features or syntax used in this benchmark.
Benchmark Preparation Code
The preparation code generates an array of 16,000 objects with random values and copies the array to ensure correct results. The myCopy
variable is initialized to null, which will be populated with the result of each benchmarking approach.
HTML Preparation Code
The HTML code includes a link to Lodash's CDN, which loads the necessary library for the uniqBy
function.
Other Alternatives
There are other approaches to removing duplicates from an array in JavaScript, such as:
Array.prototype.filter()
and checking if each element is already present in the array.Array.prototype.every()
and checking if each element meets a certain condition.These alternatives may have their own trade-offs in terms of performance, efficiency, and readability.