資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究將 JavaScript NodeList 轉換為陣列的最快方法
在本教程中，我們將學習將 JavaScript NodeList 轉換為陣列的最快方法。NodeList 的結構類似於陣列；它是 DOM（文件物件模型）元素的集合。但是，諸如“map( )”、“filter( )”和“slice( )”之類的陣列方法不能用於 NodeList 物件。
將 NodeList 轉換為陣列有很多方法，但可以使用以下兩種方法更快地完成此任務：
透過迭代 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.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.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 轉換為陣列。第一種方法是透過迭代 NodeList 使用 for 迴圈。第二種方法是使用 Array.from() 方法。建議在使用者只想轉換 NodeList 而不想迭代它時使用 Array.from() 方法。
1K+ 次檢視
