首頁 >web前端 >js教程 >將 JavaScript NodeList 轉換為陣列的最快方法

將 JavaScript NodeList 轉換為陣列的最快方法

WBOY轉載: 2023-08-31 21:01:22950瀏覽

将 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> 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 轉換為陣列的最快方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：自訂 jQuery UI 小工具主題的綜合指南下一篇：自訂 jQuery UI 小工具主題的綜合指南

看更多