在前端开发中，经常会涉及到操作 DOM 元素。而操作 DOM 元素时，获取到的通常是一个 HTMLCollection 对象，这是一个类似数组的对象。然而，HTMLCollection 并不是真正的数组，在某些情况下需要将它转换成数组才能进行一些操作。
本文将介绍最有效的方式来转换一个 HTMLCollection 数组，并提供相关实例代码以帮助读者更好地理解。
方法一: Array.from()
ES6 中引入了新的方法 Array.from()，可以将类数组对象转换成数组。因此，我们可以通过以下代码将 HTMLCollection 转换成数组：
----- -------------- - ------------------------------------- ----- ----- - ---------------------------
上述代码中，我们先使用 document.getElementsByTagName() 方法获取到一个 HTMLCollection 对象，然后使用 Array.from() 将其转换成数组。该方法的优点是简单易懂，且代码量较少。
方法二: 展开运算符
除了使用 Array.from()，还可以使用展开运算符来将 HTMLCollection 转换成数组：
----- -------------- - ------------------------------------- ----- ----- - --------------------
这种方法与 Array.from() 相似，也很简单易懂。但是需要注意的是，由于浏览器的兼容性问题，这种方法并不适用于所有的浏览器。
方法三: 循环遍历
既然 HTMLCollection 类似于数组，我们可以使用循环遍历的方式，将它转换成真正的数组：
----- -------------- - ------------------------------------- ----- ----- - --- --- ---- - - -- - - ---------------------- ---- - ------------------------------ -
上述代码中，我们通过循环遍历每一个元素，并将它们推入新的数组中，最终得到了一个真正的数组。这种方法较为繁琐，但是适用于不支持 Array.from() 和展开运算符的旧版本浏览器。
总结
以上就是将 HTMLCollection 转换成数组的三种方法，它们分别是使用 Array.from()、展开运算符和循环遍历。其中，Array.from() 是最为简单易懂的一种方法，同时也是最常用的一种。
在日常开发过程中，我们需要根据实际情况选择合适的方法来完成相关操作，以提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9139