在本教程中，我们将学习将 JavaScript NodeList 转换为 Array 的最快方法。 NodeList是一个类似于数组的结构；它是 DOM（文档对象模型）元素的集合。但是，像“map( )”、“filter( )”和“slice( )”这样的数组方法不能在 NodeList 对象上使用。
将 NodeList 转换为 Array 的方法有很多，但是使用这两种方法可以更快地完成此任务 –
-
通过迭代 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 方法 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 方法的 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 转换为 Array。第一种方法是通过迭代 NodeList 使用 for 循环。第二种方法是使用 Array.from() 方法。当用户只想转换NodeList，而不是迭代它时，建议使用Array.from()方法。
以上就是将 JavaScript NodeList 转换为数组的最快方法的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 将 JavaScript NodeList 转换为数组的最快方法
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
