在本教學中，我們將學習將 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中文網其他相關文章！
