<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
var obj = Array.from({ length: 10000 }).map((value, i) => i).reduce((val, v) => { val[v] = v; return val; }, {})
_.each(obj, function(v, k) {})
_.map(obj, function(v, k) {})
Object.entries(obj).map(function([k, v]) {})
const entries = Object.entries(obj);
for (let i = 0; i < entries.length; i++) { const [k, v] = entries[i]; }
for (let [k, v] of Object.entries(obj)) {
//
}
Object.keys(obj).forEach(function (k) {
let v = obj[k];
//
});
for (const k in obj) {
if (obj.hasOwnProperty(k)) {
let v = obj[k];
}
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash.each | |
lodash.map | |
Object.entries.map | |
Object.entries + for | |
Object.entries + for of | |
foreach | |
for..in |
Test name | Executions per second |
---|---|
lodash.each | 2077.1 Ops/sec |
lodash.map | 1498.2 Ops/sec |
Object.entries.map | 654.5 Ops/sec |
Object.entries + for | 757.6 Ops/sec |
Object.entries + for of | 754.4 Ops/sec |
foreach | 579.9 Ops/sec |
for..in | 331.8 Ops/sec |
Let's break down the benchmark and its various components.
Benchmark Overview
The test is designed to compare the performance of different approaches for iterating over an object in JavaScript. The object in question is created using Array.from
and populated with 10,000 properties.
Test Cases
There are six test cases:
each
function to iterate over the object.map
function to transform each value in the object.Object.entries
and a traditional for
loop.Object.entries
and the for...of
loop.forEach
method to iterate over the object.for...in
loop.Library Used
The test case "lodash.each" uses Lodash, a popular JavaScript utility library that provides various functions for iterating and manipulating data.
Special Features or Syntax
None of the test cases use any special features or syntax beyond standard JavaScript.
Approach Comparison
Here's a brief overview of each approach:
each
and map
functions, which are optimized for performance. These functions work by creating an intermediate array and then iterating over it.Object.entries
. This approach is more efficient than using a traditional for
loop or forEach
.for...of
loop instead. This approach is also optimized and provides good performance.forEach
method, which creates an intermediate array (in this case, the object itself). While not as efficient as the other approaches, it still provides decent performance.for...in
loop. This approach is less efficient than the others because it doesn't skip over deleted or undefined properties.Pros and Cons
Here are some pros and cons for each approach:
Other Alternatives
If you're interested in exploring alternative approaches, here are a few options:
forEach
with a custom function: Instead of using the forEach
method, you can create a custom function that iterates over the object's properties.for
loop: You can use a traditional for
loop to iterate over the object's properties, skipping deleted or undefined ones.Array.prototype.forEach.call()
: This approach is similar to using forEach
, but it uses a different method to achieve the same result.I hope this helps you understand the benchmark and its various components!