在本教學中,我們將學習將 JavaScript NodeList 轉換為 Array 的最快方法。 NodeList是一個類似陣列的結構;它是 DOM(文件物件模型)元素的集合。但是,像是「map( )」、「filter( )」和「slice( )」這樣的陣列方法不能在 NodeList 物件上使用。
將 NodeList 轉換為 Array 的方法有很多,但是使用這兩種方法可以更快地完成此任務 -
透過迭代 for 迴圈
使用 Array.from( ) 函數
在 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 實例。我們正在轉換 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中文網其他相關文章!