var arr = Array(10_000).fill(0)
arr.reduce((acc, x) => [acc, x, x], [])
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
arr.flatMap(x => [x, x])
const newArray = [];
for (let i = 0; arr.length > i; i++) {
newArray.push(arr[i]);
}
const newArray = [];
for (let x of arr) {
newArray.push(x);
}
arr.map(x => x);
const newArray = [];
arr.forEach(x => newArray.push(x));
const newArray = [];
for (let x of arr.values()) {
newArray.push(x);
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
reduce with new array | |
reduce with array mutation | |
flatMap | |
for | |
for-of | |
map | |
forEach | |
values (iterates over for-of) |
Test name | Executions per second |
---|---|
reduce with new array | 7.1 Ops/sec |
reduce with array mutation | 19090.0 Ops/sec |
flatMap | 330.6 Ops/sec |
for | 781.8 Ops/sec |
for-of | 23622.9 Ops/sec |
map | 27197.0 Ops/sec |
forEach | 19834.1 Ops/sec |
values (iterates over for-of) | 24433.1 Ops/sec |
Let's dive into the explanation of the benchmark.
Benchmark Overview
The provided benchmark, "Basic Array processing benchmark", tests various array operations in JavaScript on a desktop Linux system with Chrome 117 browser.
Tested Operations
The benchmark compares six different array operations:
arr.map(x => x)
- maps each element to itselfarr.values().forEach(x => newArray.push(x))
- iterates over the array using values()
and pushes elements to a new arrayfor (let x of arr) { newArray.push(x); }
- uses a for-of loop to iterate over the array and push elements to a new arrayarr.reduce((acc, x) => [...acc, x, x], [])
- reduces the array using the spread operator ([...acc, x, x]
)arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
- reduces the array by pushing elements to an accumulator arrayconst newArray = []; for (let i = 0; arr.length > i; i++) { newArray.push(arr[i]); }
- uses a traditional for loop to iterate over the array and push elements to a new arrayOptions Compared
Each test case compares two or more options:
arr.map()
vs. no operationarr.values().forEach()
vs. for (let x of arr) { ... }
newArray.push(x)
vs. return acc
)Pros and Cons
Here's a brief summary of the pros and cons for each operation:
arr.map(x => x)
:arr.values().forEach()
vs. for (let x of arr) { ... }
:values()
is more concise and easier to read.values()
may have better cache locality due to the iterator's nature.arr.reduce((acc, x) => [...acc, x, x], [])
vs. arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
:const newArray = []; for (let i = 0; arr.length > i; i++) { ... }
):Library and Special Features
There are no explicitly mentioned libraries in the benchmark. However, it's worth noting that values()
is a part of the Iterators API, which provides a way to iterate over iterable objects.
Other Alternatives
Some possible alternatives for array operations include:
every()
, some()
, or filter()
instead of map()
.Keep in mind that the choice of operation often depends on the specific requirements and constraints of the project.