<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array .from()</title>
</head>
<body>
<ul class="heroes">
<li>Hulk</li>
<li>Thor</li>
<li>Iron Man</li>
<li>Vision</li>
<li>Misty Knight</li>
<li>Jessica Jones</li>
<li>The Punisher</li>
</ul>
<script>
// Array.from takes in a function as a second argument, so you can directly return
// a value:
const heroNodes = document.querySelectorAll('li');
const heroes = Array.from(heroNodes, hero => hero.textContent);
console.log(heroes);
// Other ways to turn a nodelist into an array:
console.log(Array.prototype.slice.call(document.querySelectorAll('li')));
// Using the ES6 spread operator
console.log([...document.querySelectorAll('li')]);
// Using Array.from to turn an arguments object into an array
function sumAll() {
const nums = Array.from(arguments);
console.log(nums);
return nums.reduce((a, b) => a + b);
}
sumAll(2, 34, 23, 234, 234, 234234, 234234, 2342);
</script>
</body>
</html>