var arr =new Array(1000000);
let i=0;
while(i < arr.length) {
const exp = arr[i] ** 2;
i++;
}
for(let i=0; i<arr.length; i++) {
const exp = arr[i] ** 2;
}
arr.forEach((element) => {
const exp = element ** 2;
});
for(const element of arr) {
const exp = element ** 2;
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
while | |
for | |
forEach | |
for of |
Test name | Executions per second |
---|---|
while | 5.9 Ops/sec |
for | 6.4 Ops/sec |
forEach | 231.8 Ops/sec |
for of | 54.2 Ops/sec |
Let's break down the benchmark and its various components.
Benchmark Definition
The benchmark definition is a JSON object that describes the test case. In this case, it's comparing four different loop constructs:
while
for
forEach
(new ES6 spread operator with concat()
method and push
)for of
The test case involves calculating the square of each element in an array of 1 million elements using the exponentiation operator (**
).
Script Preparation Code
The script preparation code is a JavaScript snippet that initializes an array with 1 million elements:
var arr = new Array(1000000);
This code sets up the input data for the test case.
Html Preparation Code
There is no HTML preparation code provided, which means that this benchmark doesn't involve any DOM-related tests or rendering-related overhead.
Loop Constructs Comparison
Now, let's dive into the loop constructs comparison:
while
: This loop construct uses a traditional while
loop with an incrementing index variable i
. The loop continues as long as i
is less than the length of the array.for
: This loop construct uses a traditional for
loop with an explicit loop counter variable i
. The loop iterates over the indices of the array using i
.forEach
(ES6 spread operator): This loop construct uses the forEach
method, which is a part of the ECMAScript standard since ES6. It applies a provided callback function to each element in the array, without requiring an explicit index variable.for of
: This loop construct uses the for...of
loop syntax, which was introduced in ECMAScript 2015 (ES6). It iterates over the elements of the array using a value and a key (index).Library: None
There are no libraries used in this benchmark. The code is a straightforward implementation of each loop construct.
Special JS Feature/Syntax: for...of
, forEach
The for...of
loop syntax was introduced in ECMAScript 2015, and the forEach
method was also introduced in ES6. These features are part of the modern JavaScript language standard.
Pros and Cons of Each Approach
Here's a brief summary of the pros and cons of each approach:
while
:for
:while
loops for complex logic.forEach
(ES6 spread operator):forEach
method.for of
:for
loops.Alternatives
If you're looking for alternatives to these loop constructs, here are a few options:
while
: You could use a different iteration construct like do-while
or an array-based loop (e.g., using Array.prototype.findIndex()
).for
: Consider using iterative algorithms that don't rely on explicit indexing, like recursive functions.forEach
: If you prefer a more functional programming style, consider using libraries like Lodash or Underscore.js, which provide similar functionality.for of
: For arrays and other iterable objects, for...of
is usually the most efficient and readable choice.I hope this explanation helps!