如何在 JavaScript 中將 NodeList 轉換為數組

NodeList 是一個類似數組的對象，它表示 DOM 元素的集合或更具體的節點。它就像一個數組，但是你不能使用像 map() 這樣的常見數組方法 , slice() , 和 filter() 在 NodeList 對象。

查看本指南以了解 NodeList 之間的區別 和一個數組。

在本文中，我們將介紹轉換的不同方法 一個 NodeList 對像到 JavaScript 中的數組。

Array.from() 方法

在現代 JavaScript 中，轉換 NodeList 的最簡單最簡單的方法 對像到數組是通過使用 Array.from() 方法：

// create a `NodeList` object
const divs = document.querySelectorAll('div');

// convert `NodeList` to an array
const divsArr = Array.from(divs);

上述代碼的輸出是 normal Array 包含 querySelectorAll() 返回的所有節點的對象 方法。

Array.from() 方法是在 ES6 中引入的，並創建了一個新的、淺拷貝的 Array NodeList 中的對象 目的。不幸的是，它只有 適用於現代瀏覽器。要支持像 IE 這樣的舊瀏覽器，你需要一個 polyfill。

擴展運算符

另一種創建 Array 的方法 NodeList 中的對象 是通過使用擴展運算符語法 ([...iterable] ):

// create a `NodeList` object
const divs = document.querySelectorAll('div');

// convert `NodeList` to an array
const divsArr = [...divs];

ES6 的擴展操作符是一種簡潔而酷的轉換 NodeList 的方法 到 JavaScript 中的數組。然而，它只是 適用於現代瀏覽器。

Array.prototype.slice() 方法

最後，最後一種轉換NodeList的方法 到 Array 對像是通過使用 call() 執行Array.prototype.slice()的方法 NodeList 上的方法 對像如下圖：

// create a `NodeList` object
const divs = document.querySelectorAll('div');

// convert `NodeList` to an array
const divsArr = Array.prototype.slice.call(divs);

也可以使用上述方法的簡潔形式：

const divsArr = [].slice.call(divs);

Array.prototype.slice.call() 適用於所有現代和舊瀏覽器，包括 IE 6+。如果你想支持最多的瀏覽器，你應該使用這種方法。

以上所有方法都提供了一個真正的 JavaScript 數組，您可以使用 forEach() 對其進行迭代，並使用所有您喜歡的數組方法來做不同的事情。