const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
let index = 0;
items.forEach(i => index++);
const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
let index = 0;
const newArray = [];
for (let i in items) {
newArray.push(i);
}
const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
let index = 0;
const newArray = [];
for (let i of items) {
newArray.push(i);
}
const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
let index = 0;
const newArray = [];
for(let i = 0; i < items.length; ++i) {
newArray.push(items[i]);
}
const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
let index = 0;
const newArray = [];
for(let i = items.length; i > 0; --i) {
newArray.push(items[i]);
}
const items = Array.from({length: 100000}, () => Math.floor(Math.random() * 40));
items.reduce((acc,value) => {
acc.push(value);
return acc;
}, new Array());
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
foreach | |
for-in | |
for-of | |
for | |
optimized-for | |
reduce |
Test name | Executions per second |
---|---|
foreach | 55.3 Ops/sec |
for-in | 48.2 Ops/sec |
for-of | 61.0 Ops/sec |
for | 55.9 Ops/sec |
optimized-for | 55.3 Ops/sec |
reduce | 54.5 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Overview
MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The goal of these benchmarks is to compare the performance of different approaches for common tasks in JavaScript. In this case, we have six benchmark tests that compare the performance of various loop constructs: forEach
, for-in
, for-of
, for
, optimized-for
, and reduce
.
Loop Constructs Compared
Here's a brief overview of each loop construct:
forEach
: This is a built-in array method that iterates over an array using a callback function. It's often used when you need to perform an action on each element of the array without modifying it.for-in
: This loop construct iterates over the properties of an object using a string key. It's not as commonly used as forEach
, but can be useful in certain situations, such as iterating over an object's keys or values.for-of
: This is a newer loop construct introduced in ECMAScript 2015 (ES6). It iterates over the elements of an array using a string key. It's similar to forEach
, but provides more flexibility and safety features, such as avoiding errors when accessing array properties.for
: This is a traditional loop construct that uses a counter variable to iterate over an array. It's often used when you need more control over the iteration process or want to implement your own iteration logic.optimized-for
: This loop construct is optimized for performance and is designed to be faster than the other loop constructs. However, it requires careful consideration of edge cases and error handling.Pros and Cons
Here are some pros and cons of each loop construct:
forEach
:for-in
:for-of
:forEach
, such as avoiding errors when accessing array properties.for
:optimized-for
:Other Considerations
When choosing a loop construct, consider the following factors:
forEach
is often faster for arrays, while for-in
and optimized-for
can be beneficial for objects.for-in
may not work well with arrays or other data structures where property names are not unique.Alternatives
Other alternatives to these loop constructs include:
map
, filter
, and reduce
. These methods can often be more efficient than manual loop constructs.In conclusion, the choice of loop construct depends on specific use cases, performance requirements, and personal preference. By understanding the pros and cons of each loop construct, developers can choose the best approach for their specific needs.