介绍
对于熟悉 JavaScript 的开发者来说，NodeList 是一个常见的类型。在 DOM 中，NodeList 是一个对象集合，它包含 HTML 元素或其他 DOM 元素对象。 NodeList 类型的对象是只读的。也就是说，我们不能像操作数组一样操作 NodeList。但是，在某些情况下，我们确实需要将 NodeList 转换为数组。
为什么需要将 NodeList 转换为数组
虽然 NodeList 和数组有很多相似之处，但是 NodeList 不能像数组那样使用所有的数组方法。我们可能需要使用数组的一些方法来操作 NodeList。比如，我们可能需要对 NodeList 进行排序，过滤，或者将多个 NodeList 合并成一个数组等等。
方法一：使用 Array.from()
从 ES6 开始，JavaScript 引入了一个全新的方法 Array.from()，该方法可以将类数组对象转换为真正的数组，包括 NodeList。 它的语法如下所示：
Array.from(nodeList)这个方法非常简单易懂，没有任何坑点，而且它是将 NodeList 转换为数组的最快方法之一。
示例：
假设我们有以下 HTML：
```html
Item 1
Item 2
Item 3
```
我们可以使用以下 JavaScript 代码将 NodeList 转换为数组并输出：
let listItems = document.querySelectorAll('li');
let itemsArray = Array.from(listItems);
console.log(itemsArray);
输出：
[li, li, li]方法二：使用拓展运算符（Spread Operator）
另一种将 NodeList 转换为数组的方法是使用拓展运算符（Spread Operator），它的语法如下所示：
[...nodeList]这种方法与 Array.from() 很相似，但更为简单，代码量更少。但是，这种方法可能不是那么出色，特别是在处理较大的 NodeList 时。
示例：
使用上面的示例 HTML 和以下的 JavaScript 代码，我们可以将 NodeList 转换为数组并输出：
let listItems = document.querySelectorAll('li');
let itemsArray = [...listItems];
console.log(itemsArray);
输出：
[li, li, li]方法三：循环并逐一添加到新数组中
最后一种将 NodeList 转换为数组的方法是使用常规的循环，遍历 NodeList 并逐一添加到新数组中。 这个方法也是最传统的 JavaScript 方法，虽然它不如其他方法快，但在某些情况下可能会有所帮助。
示例：
使用上面的示例 HTML 和以下的 JavaScript 代码，我们将 NodeList 转换为数组并输出：
let listItems = document.querySelectorAll('li');
let itemsArray = [];
for (let i = 0; i < listItems.length; i++) {
itemsArray.push(listItems[i]);
}
console.log(itemsArray);
输出：
[li, li, li]总结
无论您是在使用 Array.from()、Spread Operator 还是常规循环，以上都是将 NodeLists 转换为数组的最常见和最容易的方法。 在大多数情况下，您可以使用它们中的任何一种，并根据您的需求作出选择。 但请注意，Array.from() 可能比 Spread Operator 更快，因为它不会先将 NodeList 转换为可迭代对象。最后，如果您经常需要将 NodeList 转换为数组，请考虑将 NodeList 转换为数组的方法封装成一个 JavaScript 函数以供您在整个项目中使用。