const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;items.forEach(i => index++);const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;const newArray = [];for (let i in items) { newArray.push(i);}const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;const newArray = [];for (let i of items) { newArray.push(i);}const items = Array.from({length: 1000}, () => 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: 1000}, () => 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: 1000}, () => 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 | 3391.0 Ops/sec |
| for-in | 3349.0 Ops/sec |
| for-of | 3502.1 Ops/sec |
| for | 3526.9 Ops/sec |
| optimized-for | 3528.1 Ops/sec |
| reduce | 3433.5 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks!
What is being tested?
The provided JSON benchmark represents six different ways to iterate over an array in JavaScript: foreach, for-in, for-of, for, optimized-for, and reduce. The benchmark tests how fast each iteration method can push elements into a new array.
Options compared:
Here's a brief overview of each option:
foreach: Uses the Array.prototype.forEach() method to iterate over the array.for-in: Iterates over the array using a traditional for loop with an in keyword.for-of: Iterates over the array using a traditional for loop with a of keyword (introduced in ECMAScript 2015).for: Uses a traditional for loop to iterate over the array, manually incrementing the index.optimized-for: This option is not explicitly mentioned in the benchmark definition, but based on the test case name, it seems to be an optimized version of the for loop that avoids unnecessary iterations.reduce: Uses the Array.prototype.reduce() method to accumulate elements into a new array.Pros and Cons:
foreach: Fast and easy to read, but may not be as efficient as other options due to its use of function calls.for-in: Manual iteration can lead to performance issues if the loop condition is incorrect or the array is modified during iteration. However, it's a straightforward way to iterate over an array.for-of: Introduced in ECMAScript 2015, this option provides a concise and readable way to iterate over arrays. It's gaining popularity but may not be supported by older browsers or engines.for: Requires manual indexing, which can lead to performance issues if not implemented correctly.optimized-for: This option is likely an optimized version of the for loop that avoids unnecessary iterations. Its implementation details are not provided in the benchmark definition.for loops.reduce: Accumulates elements into a new array using a single pass. It's often used for aggregating data or transforming arrays.Library and syntax:
None of the options rely on external libraries, but they do utilize JavaScript's built-in API.
Special JS feature or syntax:
The for-of loop is a relatively new feature introduced in ECMAScript 2015. It's not widely supported by older browsers or engines, so it might require additional setup for compatibility.
Overall, the choice of iteration method depends on your specific use case, personal preference, and the required level of performance. These benchmarks can help you determine which option best suits your needs.
