在前端开发中，我们经常需要从DOM树中获取一组元素，并对它们进行操作。通常情况下，这些元素都是由相同的标签名或类名所组成，而且它们会以一个NodeList（节点列表）的形式返回。然而，在实际开发中，我们更倾向于使用数组来处理数据，因为数组提供了更多的方法和更灵活的操作方式。因此，我们需要将节点列表转换为JavaScript中的数组。
NodeList对象和Array对象
在介绍如何将节点列表转换为数组之前，我们需要先了解一下NodeList对象和Array对象的区别：
- NodeList对象：是一个包含一组节点的类数组对象，通常由DOM方法返回，例如getElementsByTagName或querySelectorAll。
- Array对象：是JavaScript原生的数组对象，具有很多有用的方法和属性，例如push、pop、slice等。
虽然NodeList对象也可以使用一些数组方法（如length、item、forEach等），但是它不是一个真正意义上的数组对象，它没有数组的所有方法和属性。因此，如果我们需要对一组元素进行复杂的操作，我们应该将NodeList转换为真正的数组对象Array。
将NodeList转换为Array的方法
1. Array.from()方法
Array.from()方法可以将类似数组或迭代器对象转换为真正的数组对象。它的第一个参数就是需要转换的对象，第二个参数是一个可选的映射函数，用于对每个元素进行处理。
-- -------- -- ----- ----- ------------ ----- -------- - --------------------------------- ----- --------- - --------------------- ----------------------- -- ----- ---- ---- ---- -- --- - -- ---- ------- -- --- ----- ----- --------- - -------------------- ------------ - ------ -- - -- --- ----------------------- -- --- -- -- ----
2. Spread operator
ES6中引入了spread operator（展开运算符），它可以将类数组对象展开成真正的数组对象。它可以通过在前面加上三个点号“...”来实现。
-- -------- -- ----- ----- ------ -------- ----- -------- - --------------------------------- ----- -------- - -------------- ---------------------- -- ----- ---- ---- ----
3. Array.prototype.slice()方法
slice()方法可以返回一个新的数组对象，它包含从原始数组中指定开始下标到结束下标之间的所有元素。需要注意的是，NodeList对象不支持直接使用slice()方法，因此我们需要借助Function.call()或Function.apply()方法来调用它。
-- -------- -- ----- ----- ------- ----- -------- - --------------------------------- ----- -------- - ------------------------------------- ---------------------- -- ----- ---- ---- ----
4. for循环遍历
如果以上方法都无法满足需求，我们也可以使用for循环来遍历NodeList对象，并手动将每个元素添加到数组中。
-- -------- -- ----- ----- --- ---- ----- -------- - --------------------------------- ----- -------- - --- --- ---- - - -- - - ---------------- ---- - --------------------------- - ---------------------- -- ----- ---- ---- ----
总结
在实际开发中，我们经常需要将DOM节点列表转换为JavaScript中的数组。可以通过Array.from()、spread operator、slice()方法或for循环遍历实现。其中，Array.from()和spread operator是最简洁和常用的方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13563