easiest-way-to-convert-htmlcollection-into-an-array-bkl

原始地址：https://dev.to/hasnaindev/easiest-way-to-convert-htmlcollection-into-an-array-bkl

// 有两种方法可以将HTMLCollection或NodeList转换为数组。
// 如果您不知道HTMLCollection和NodeList是什么，或者为什么需要将它们转换为普通数组，别着急，我会很快解释清楚！🐢
// 首先，使用ES6之前的方法。
var htmlCollection = document.getElementsByClassName('btn');
htmlCollection = Array.prototype.slice.call(elements);
// 或者您可以使用ES6语法来完成相同的事情。
var nodeList = document.querySelectorAll('.btn');
nodeList = [...nodeList];
// 或者按照Traek Wells在评论中建议的使用Array.from方法。😎
var imageHtmlCollection = document.getElementsByTagName('img');
imageHtmlCollection = Array.from(htmlCollection);

// 🎉🎉

// What is HTMLCollection and NodeList?
// 使用getElementsByClassName或querySelectorAll等方法，它们分别返回HTMLCollection或NodeList而不是数组。
// HTMLCollection包含HTML元素，而NodeList更进一步，它不仅返回HTML元素列表，还可以返回类似TextNode的节点，并且具有额外的方法list NodeList.forEach。
// 有关该主题的更详细讨论，您可以阅读这篇名为[HTMLCollection，NodeList和Array之间的区别](https://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects)的stackoverflow帖子。

// Why convert them into an Array?
// 将HTMLCollection和NodeList转换为数组的唯一原因是，如果您想要使用类似forEach，map，filter和reduce的高阶函数。
// 有很多用例，例如，假设您的元素包含带有lazy-load类的data-src属性。如果您想要访问data-src并过滤掉所有没有data-src或为空的元素，可以执行以下操作。

// Use Case
var lazyLoadables = [...document.querySelectorAll('.lazy-load')]
.filter((element) => element.getAttribute('data-src').trim());
lazyLoadImages(lazyLoadables);

// 通过这样做，您确保只在需要时传递需要加载的源的元素。