將 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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
開始使用Chart.js：PIE，DONUT和BUBBLE圖表
Mar 15, 2025 am 09:19 AM
本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。 創建餅圖和環形圖 餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。 餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體
初學者的打字稿，第2部分：基本數據類型
Mar 19, 2025 am 09:10 AM
掌握了入門級TypeScript教程後，您應該能夠在支持TypeScript的IDE中編寫自己的代碼，並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。 TypeScript在此基礎上定義了更多類型，本教程將詳細介紹所有這些類型。 Null數據類型 與JavaScript一樣，TypeScript中的null
