var obj = {
'a': [{
id: 'a',
num: 1
},
{
id: 'b',
num: 1
},
{
id: 'c',
num: 1
},
{
id: 'd',
num: 1
},
{
id: 'e',
num: 1
},
{
id: 'f',
num: 1
},
{
id: 'g',
num: 1
},
{
id: 'b',
num: 1
},
{
id: 'c',
num: 1
},
{
id: 'd',
num: 1
},
{
id: 'e',
num: 1
},
{
id: 'f',
num: 1
},
{
id: 'g',
num: 1
}],
'b': [{
id: 'a',
num: 1
},
{
id: 'b',
num: 1
},
{
id: 'c',
num: 1
},
{
id: 'd',
num: 1
},
{
id: 'e',
num: 1
},
{
id: 'f',
num: 1
},
{
id: 'g',
num: 1
},
{
id: 'b',
num: 1
},
{
id: 'c',
num: 1
},
{
id: 'd',
num: 1
},
{
id: 'e',
num: 1
},
{
id: 'f',
num: 1
},
{
id: 'g',
num: 1
}],
};
for (var i=10000; i > 0; i--) {
for (var key in obj) {
for (var i of obj[key]) {
console.log(i.id)
}
}
}
for (var i=10000; i > 0; i--) {
const items = Object.values(obj);
for (var i of items) {
console.log(i.id)
}
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
for-in | |
Object.values |
Test name | Executions per second |
---|---|
for-in | 11057.7 Ops/sec |
Object.values | 117847.2 Ops/sec |
Let's break down the provided JSON and explain what's being tested.
Benchmark Definition
The benchmark definition is an object that contains information about the benchmark being tested. In this case, we have two test cases:
This suggests that we're comparing the performance of three different approaches: using for-in
loops, object.keys()
, and Object.values()
to iterate over an object's properties.
Script Preparation Code
The script preparation code is a JavaScript snippet that creates an object with multiple nested levels. This object will be used as input for our benchmarking tests.
var obj = {
'a': [
{ id: 'a', num: 1 },
{ id: 'b', num: 1 },
// ... many more objects ...
],
'b': [
{ id: 'a', num: 1 },
{ id: 'b', num: 1 },
// ... many more objects ...
]
};
This object has multiple levels of nesting, which will be used to test the performance of our three approaches.
Html Preparation Code
The HTML preparation code is empty in this case, suggesting that the benchmarking tests are being run in a headless environment (i.e., without rendering the web page).
Individual Test Cases
We have two individual test cases:
for-in
loop to iterate over the object's properties.for (var i=10000; i > 0; i--) {
for (var key in obj) {
for (var i of obj[key]) {
console.log(i.id)
}
}
}
Object.values()
method to get an array of the object's values, and then iterates over that array using a for...of
loop.for (var i=10000; i > 0; i--) {
const items = Object.values(obj);
for (var i of items) {
console.log(i.id)
}
}
Latest Benchmark Results
The latest benchmark results show the execution rate per second for each test case, measured in the browser specified.
These results suggest that using Object.values()
is significantly faster than using a traditional for-in
loop for iterating over an object's properties, especially when dealing with nested objects.
Other Alternatives
Some alternative approaches to iterating over an object's properties include:
forEach()
: This method is similar to Object.values()
, but it allows you to pass a callback function that will be executed on each property.for (var i=10000; i > 0; i--) {
const items = Object.values(obj);
items.forEach((item) => {
console.log(item.id)
});
}
Object.keys()
: This method returns an array of the object's keys, which can then be iterated over using a for...of
loop.for (var i=10000; i > 0; i--) {
const items = Object.keys(obj).map((key) => obj[key]);
for (var item of items) {
console.log(item.id)
}
}
It's worth noting that the performance differences between these approaches will depend on the specific use case and the type of data being processed.