在本教程中，我们将学习将 JavaScript NodeList 转换为 Array 的最快方法。 NodeList是一个类似于数组的结构；它是 DOM（文档对象模型）元素的集合。但是，像“map( )”、“filter( )”和“slice( )”这样的数组方法不能在 NodeList 对象上使用。
将 NodeList 转换为 Array 的方法有很多，但是使用这两种方法可以更快地完成此任务 -
通过迭代 for 循环
-
使用 Array.from( ) 函数
立即学习“Java免费学习笔记（深入）”；
通过迭代for循环
在 JavaScript 中，我们可以使用 for 循环来迭代 NodeList 来获取所有元素来执行特定任务。因此，通过迭代 NodeList，我们在数组中复制了 NodeList 的所有元素。
语法
const len = nodeList.length;
const arr = Array(len);
for (var i = 0 ; i != len ; i++) {
arr[i] = nodeList[i];
}
我们将nodeList的长度保存在一个变量中并声明该大小的数组。当我们知道数组大小时，最好声明固定大小的数组。然后我们使用 for 循环在数组中赋值。
算法
第 1 步 - 将 nodeList 的长度存储在 len 变量中。
第 2 步 - 声明 len 大小的数组。
第 3 步 - 在 for 循环中，用值 0 初始化计数器变量“i”。
步骤 3.1 - 迭代循环，直到“i”不等于 len。
步骤 3.2 - 在更新条件中，将“i”增加 1。
-
步骤 3.3 - 在 for 循环体中，将 NodeList 的第 i 个索引的值分配到数组的第 i 个索引中。
示例
在下面的示例中，使用 Document 方法 document.querySelectorAll()，我们获取类型选择器“div”的 NodeList。我们正在将此 NodeList 转换为数组。
Convert JavaScript NodeList to Array
This is paragraph of second 'div' element
在上面的代码中，用户可以看到我们使用了 for 循环从 NodeList 中创建了一个实际的数组。我们使用 const 将 NodeList 的长度保存在 ‘len’ 中，并声明大小为 ‘len’ 的数组；这将使我们的操作更快。
我们有 3 个“div”元素。因此，我们得到了一个大小为 3 的数组，如输出所示。
使用Array.from()函数
此方法可用于创建可迭代对象或类数组对象的 Array 实例。我们正在转换 NodeList，它的结构与数组类似。
使用 ES6 (ECMAScript 6)，我们可以使用 Array.from() 函数非常轻松地从 NodeList 获取数组。如果我们不想迭代 NodeList 而只想转换它，那么这将是最快的方法。
语法
const nodeList = document.querySelectorAll('p');
let arr = Array.from(nodeList);
在这里，我们使用 Document 方法的 document.querySelectorAll() 创建了类型选择器“p”的 NodeList。我们将此 NodeList 作为参数传递到 Array.from() 函数中。该函数返回一个数组。我们只需要一行代码就可以将其转换为数组，这样很容易记住和理解。
示例
在下面的示例中，我们创建类型选择器“p”的 NodeList。我们使用 Array.from() 函数将此 NodeList 转换为数组。
Convert JavaScript NodeList to Array
We are here to teach you various concepts of Computer Science through our articles.
Stay connected with us for such useful content.
在上面的输出中，用户看到我们得到了一个包含 2 个“p”元素的数组。因此，我们的 NodeList 仅使用一个函数调用就成功转换为数组。
注意 - 上述方法在所有现代浏览器中都可以很好地工作，但在旧版浏览器中可能无法正常工作。
我们已经学会了将 NodeList 转换为 Array。第一种方法是通过迭代 NodeList 使用 for 循环。第二种方法是使用 Array.from() 方法。当用户只想转换NodeList，而不是迭代它时，建议使用Array.from()方法。
