将 JavaScript NodeList 转换为数组的最快方法-js教程-PHP中文网

首页

web前端

js教程

将 JavaScript NodeList 转换为数组的最快方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 31, 2023 pm 09:01 PM

将 JavaScript NodeList 转换为数组的最快方法

在本教程中，我们将学习将 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 id="Convert-JavaScript-NodeList-to-Array"> 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 id="Convert-JavaScript-NodeList-to-Array"> 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 转换为数组的最快方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。