array.from vs iterator (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div>

Setup

const divs = document.querySelectorAll('div')

Test runner

Ready to run.

Testing in
TestOps/sec
array from
const arr = Array.from(divs).map(el => el)
ready
iter spread
const arr = [...divs].map(el => el)
ready
for of
const arr = []

for (div of divs) {
	arr.push(div)
}
ready
for loop
const arr = []

for (let i = 0; i < divs.length; i++) {
	arr.push(divs[i])
}
ready
for loop w cached length
const arr = []
const len = divs.length

for (let i = 0; i < len; i++) {
	arr.push(divs[i])
}
ready
foreach
const arr = []

divs.forEach(d => arr.push(d))
ready
array.from vs keys() length - array.from
const z = Array.from(divs).length
ready
array.from vs keys() length - array.from
const z = divs.keys().length
ready
iter .length property direct access
const z = divs.length
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.