数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究将 JavaScript NodeList 转换为数组的最快方法
在本教程中，我们将学习将 JavaScript NodeList 转换为数组的最快方法。NodeList 的结构类似于数组；它是 DOM（文档对象模型）元素的集合。但是，诸如“map( )”、“filter( )”和“slice( )”之类的数组方法不能用于 NodeList 对象。
将 NodeList 转换为数组有很多方法，但可以使用以下两种方法更快地完成此任务：
通过迭代 for 循环
使用 Array.from( ) 函数
通过迭代 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.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”中，并声明大小为“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.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 转换为数组。第一种方法是通过迭代 NodeList 使用 for 循环。第二种方法是使用 Array.from() 方法。建议在用户只想转换 NodeList 而不想迭代它时使用 Array.from() 方法。
1K+ 次查看
