<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
underscore = _;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>
<script>
lodash = _;
</script>
</head>
<body>
</body>
</html>
var PromosArray = [
{
type: "regular",
display: "$123.00"
},
{
type: "markdown",
display: "$100.00"
},
{
type: "promo",
display: "$80.00"
}
];
function testArrayIteration() {
var items = [];
var i;
for (i = 0; i < PromosArray.length; i++) {
items.push(PromosArray[i].type);
}
return items;
}
function testArrayMap() {
return PromosArray.map(function (promo) {
return promo.type;
});
}
function testUnderscoreMap() {
return underscore.map(PromosArray, function (promo) {
return promo.type;
});
}
function testLodashMap() {
return lodash.map(PromosArray, function (promo) {
return promo.type;
});
}
function testForLoop() {
var items = [];
for (var i = 0; i < PromosArray.length; i++) {
items.push(PromosArray[i].type);
}
return items;
}
testArrayIteration();
testArrayMap();
testUnderscoreMap();
testLodashMap();
testForLoop();
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
testArrayIteration | |
testArrayMap | |
testUnderscoreMap | |
testLodashMap | |
testForLoop |
Test name | Executions per second |
---|---|
testArrayIteration | 1225445.9 Ops/sec |
testArrayMap | 1573433.6 Ops/sec |
testUnderscoreMap | 2036193.0 Ops/sec |
testLodashMap | 2099738.0 Ops/sec |
testForLoop | 1229341.1 Ops/sec |
Let's dive into the benchmark and explain what's being tested.
Benchmark Overview
The benchmark measures the performance of four different approaches to iterate over an array of objects:
i
to iterate over the array.map()
method on the array to create a new array with the same number of elements, but with each element being a transformed version of the original one.map()
function from the Underscore.js library to perform the transformation.map()
function from the Lodash.js library to perform the transformation.Comparison of Approaches
Here's a brief summary of each approach:
i
to iterate over the array and push each element into a new array.map()
method on the array to create a new array with the same number of elements. The function passed to map()
is called for each element in the original array, and its return value is used as the corresponding element in the new array.map()
function from the Underscore.js library to perform the transformation. The Underscore.js library provides a set of functional programming helpers that can be used to simplify common tasks, such as map transformations.map()
function from the Lodash.js library to perform the transformation.Pros and Cons of Each Approach
Here are some pros and cons for each approach:
map()
can handle any number of elements.Library Considerations
The benchmark uses two libraries:
map()
.Both libraries are designed to simplify common tasks and provide a concise way to write code. However, they also introduce additional overhead due to the presence of a library.
Conclusion
In conclusion, the benchmark measures the performance of four different approaches to iterate over an array of objects: For Loop, Array Map, Underscore Map, and Lodash Map. Each approach has its pros and cons, and the choice of which one to use depends on the specific requirements and constraints of the project.
It's worth noting that the performance differences between these approaches can be significant, especially for large datasets or performance-critical code paths.