Benchmark: .filter().map() vs flatMap() vs reduce()

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const data = Array.from({length: 2**16}, (_, i) => ({index: i}));

Tests:

.filter().map()
const filteredData = data .filter(i => i.index % 2 === 0) .map(i => i.index);
.flatMap()
const filteredData = data.flatMap(i => i.index % 2 === 0 ? [i.index] : []);
.reduce()
const filteredData = data.reduce((memo, i) => { if (i.index % 2 === 0) { memo.push(i.index); } return memo; }, []);
for ... of
const filteredData = []; for (let i of data) { if (i.index % 2 === 0) { filteredData.push(i.index); } }
regular for
const filteredData = []; for (let i = 0; i < data.length; i++) { if (data[i].index % 2 === 0) { filteredData.push(data[i].index); } }
regular for, prefilled then trimmed
let filteredData = Array.from({length: data.length}); let filteredIndex = 0; for (let i = 0; i < data.length; i++) { if (data[i].index % 2 === 0) { filteredData[filteredIndex++] = data[i].index; } } filteredData = filteredData.splice(filteredIndex, data.length - filteredIndex);

Rendered benchmark preparation results:

Previous results

Test case name	Result
.filter().map()
.flatMap()
.reduce()
for ... of
regular for
regular for, prefilled then trimmed

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 146 on Android

Test name	Executions per second
.filter().map()	667.5 Ops/sec
.flatMap()	586.3 Ops/sec
.reduce()	1164.8 Ops/sec
for ... of	4896.8 Ops/sec
regular for	1268.0 Ops/sec
regular for, prefilled then trimmed	254.5 Ops/sec

Related benchmarks:

.filter().map() vs flatMap() vs reduce() (version: 2)