极客笔记将JavaScript NodeList转换为Array的最快方法
在本教程中，我们将学习将JavaScript NodeList 转换为 Array 的最快方法。NodeList是类似数组的结构；它是DOM（文档对象模型）元素的集合。但是，无法在NodeList对象上使用‘map()’、‘filter()’和‘slice()’等数组方法。
有很多方法可以将NodeList转换为Array，但使用以下两种方法可以更快地完成此任务 –
- 通过迭代for循环
-
使用Array.from()函数
通过迭代for循环
在JavaScript中，我们可以使用for循环迭代NodeList以获取所有元素以执行特定任务。因此，通过迭代NodeList，我们将所有NodeList元素的副本复制到一个Array中。
语法
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.querySelectorAll()方法，我们获取类型选择器为’div’的NodeList。我们将这个NodeList转换为一个数组。
<html>
<body>
<h2> Convert JavaScript NodeList to Array </h2>
<div> <p> This is paragraph of first 'div' element </p> </div>
<div> <p> This is paragraph of second 'div' element </p> </div>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
output.innerHTML = " <p> This is paragraph of third 'div' element </p> "
output.innerHTML += " <b> Output of <i> NodeList </i> <b> <br> <br> ";
//get NodeList of 'div' elements
const nodeList = document.querySelectorAll('div');
//Display output of NodeList
output.innerHTML += nodeList + "<br> <br>";
output.innerHTML += "<b> Output of <i> Array </i> <b> <br> <br>";
//save length of NodeList
const len = nodeList.length;
//Declare array of size len
const arr = Array(len);
//This for loop will convert NodeList to Array
for (var i = 0 ; i != len ; i++) {
arr[i] = nodeList[i];
}
//Display output of Array
output.innerHTML += arr;
</script>
</body>
</html>
在上面的代码中，用户可以看到我们使用了for循环来从NodeList中创建一个实际的数组。我们使用const来保存NodeList的长度并声明大小为‘len’的数组，这将使我们的操作更快。
我们有3个‘div’元素，所以输出中可以看到我们得到了一个大小为3的数组。
使用Array.from( )函数
这个方法可以用来创建一个可迭代对象或类似数组对象的数组实例。我们正在将类似于数组的NodeList转换为数组。
在ES6（ECMAScript 6）中，我们可以使用Array.from()函数非常容易地从NodeList中获取一个数组。如果我们不想遍历NodeList，只想转换它，那么这将是最快的方法。
语法
const nodeList = document.querySelectorAll('p');
let arr = Array.from(nodeList);
在这里，我们使用document.querySelectorAll()文档方法创建了一个类型为’p’的NodeList。我们将这个NodeList作为参数传递给Array.from()函数。这个函数返回一个数组。我们只需要一行代码就可以将其转换为数组，这使得记忆和理解变得容易。
示例
在下面的示例中，我们正在创建一个类型为’p’的NodeList。我们使用Array.from()函数将这个NodeList转换为一个数组。
<html>
<body>
<h2> Convert JavaScript NodeList to Array </h2>
<p> We are here to teach you various concepts of Computer Science through our articles.</p>
<p>Stay connected with us for such useful content.</p>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
output.innerHTML = " <b> Output of <i> NodeList </i> <b> <br> <br> ";
//get NodeList of 'p' elements
const nodeList = document.querySelectorAll('p');
//Display output of NodeList
output.innerHTML += nodeList + "<br> <br>";
output.innerHTML += " <b> Output of <i> Array </i> <b> <br> <br> ";
//This will convert NodeList to Array
let arr = Array.from(nodeList);
//Display output of Array
output.innerHTML += arr;
</script>
</body>
</html>
在上面的输出中，用户可以看到我们得到了一个包含2个p元素的数组。所以，我们成功地将NodeList转换为数组，仅使用了一个函数调用。
注意 − 上述方法在所有现代浏览器中都能很好地工作，但在较旧的浏览器中可能无法正常工作。
我们已经学会了将NodeList转换为数组的方法。第一种方法是使用for循环遍历NodeList。第二种方法是使用Array.from()方法。建议在用户只需要将NodeList转换为数组而不需要遍历它时使用Array.from()方法。