转换一个HTMLCollection数组最有效的方式

在前端开发中，经常会涉及到操作 DOM 元素。而操作 DOM 元素时，获取到的通常是一个 HTMLCollection 对象，这是一个类似数组的对象。然而，HTMLCollection 并不是真正的数组，在某些情况下需要将它转换成数组才能进行一些操作。

本文将介绍最有效的方式来转换一个 HTMLCollection 数组，并提供相关实例代码以帮助读者更好地理解。

方法一: Array.from()

ES6 中引入了新的方法 Array.from()，可以将类数组对象转换成数组。因此，我们可以通过以下代码将 HTMLCollection 转换成数组：

const htmlCollection = document.getElementsByTagName('div');
const array = Array.from(htmlCollection);

上述代码中，我们先使用 document.getElementsByTagName() 方法获取到一个 HTMLCollection 对象，然后使用 Array.from() 将其转换成数组。该方法的优点是简单易懂，且代码量较少。

方法二: 展开运算符

除了使用 Array.from()，还可以使用展开运算符来将 HTMLCollection 转换成数组：

const htmlCollection = document.getElementsByTagName('div');
const array = [...htmlCollection];

这种方法与 Array.from() 相似，也很简单易懂。但是需要注意的是，由于浏览器的兼容性问题，这种方法并不适用于所有的浏览器。

方法三: 循环遍历

既然 HTMLCollection 类似于数组，我们可以使用循环遍历的方式，将它转换成真正的数组：

const htmlCollection = document.getElementsByTagName('div');
const array = [];
for (let i = 0; i < htmlCollection.length; i++) {
  array.push(htmlCollection[i]);
}

上述代码中，我们通过循环遍历每一个元素，并将它们推入新的数组中，最终得到了一个真正的数组。这种方法较为繁琐，但是适用于不支持 Array.from() 和展开运算符的旧版本浏览器。

总结

以上就是将 HTMLCollection 转换成数组的三种方法，它们分别是使用 Array.from()、展开运算符和循环遍历。其中，Array.from() 是最为简单易懂的一种方法，同时也是最常用的一种。

在日常开发过程中，我们需要根据实际情况选择合适的方法来完成相关操作，以提高代码的质量和效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9139