For traversing an array-like object, is better use -- for performance -- Array.from( ).forEach() or for loop?
Example of an array-like object:
let childeNodes = document.querySelector('#someid').childNodes;
Iteration with Array.from().forEach():
Array.from(childNodes).forEach(node => {
// do something with node
})
Or iteration with for:
for (let i = 0; i < childNodes.length; i++) {
// do something with childNodes[i]
}
Note that there are two more interesting variants:
The Array.from function accepts a second argument which is a callback called for each element. We can expect that to work faster than the .forEach method appended to it, as no intermediate array has to be created
The ES6 for..of loop
But it is a known fact that the old-fashioned for loop beats all alternatives. Here is a little snippet that makes the measurements:
const childNodes = document.querySelector('#someid').childNodes;
let i, start, duration, times = 500000;
k = times;
start = performance.now();
while (k>0) {
Array.from(childNodes).forEach(node =>
k -= node ? 1 : 0
);
}
duration = performance.now() - start;
console.log('Array.from with forEach: ', duration.toFixed(2));
k = times;
start = performance.now();
while (k>0) {
Array.from(childNodes, node =>
k -= node ? 1 : 0
);
}
duration = performance.now() - start;
console.log('Array.from callback: ', duration.toFixed(2));
k = times;
start = performance.now();
while (k>0) {
for (let i = 0; i < childNodes.length; i++) {
k -= childNodes[i] ? 1 : 0;
}
}
duration = performance.now() - start;
console.log('Oldfashioned for-loop: ', duration.toFixed(2));
k = times;
start = performance.now();
while (k>0) {
for (const node of childNodes) {
k -= node ? 1 : 0;
}
}
duration = performance.now() - start;
console.log('for-of loop: ', duration.toFixed(2));<ul id="someid">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>Your question is phrased wrong.
Instead of: Array.from vs for(..)
It should be: Array.forEach vs for(...)
And for that question you can find very good answers in SO or a simple google search.
for loop is faster.
forEach is slower, but better fits functional programming paradigms.
According to this jsperf a for loop is faster than forEach, but a for...in is slowest.
As mentioned though, the Array.from is irrelevant as it's only called once.
Also worth mentioning is that in a real world use case of your example, the slowest operation is likely to be document.querySelector. According to this jsperf using getElementById is much faster.
A larger takeaway here is to understand use cases and maintainability before worrying about performance; and when you do worry about performance, think about it more holistically.
Array.fromand aforloop are not analogous.fromis only called once.forEachis being called for each item. I would update your question to clarify this point.