将 NodeList 变成数组 - JavaScript

在 JavaScript 中，我们通常会经常使用 NodeList 来获取 DOM 元素列表。然而，NodeList 并不是真正的数组，因此很多数组的方法都无法直接使用。这时我们需要将 NodeList 转化为真正的数组。

方法一：使用 Array.from()

Array.from() 是 ES6 新添加的方法，它可以将类数组对象（包括 NodeList）转化为真正的数组。

const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList);
console.log(arr);

方法二：使用展开运算符

展开运算符（spread operator）是 ES6 中的新特性，它可以将可迭代对象（包括 NodeList）展开为数组。

const nodeList = document.querySelectorAll('div');
const arr = [...nodeList];
console.log(arr);

方法三：使用 Array.prototype.slice.call()

这种方法是将 NodeList 看做是类数组对象（array-like object），然后使用 Array.prototype.slice.call() 方法将其转化为真正的数组。

const nodeList = document.querySelectorAll('div');
const arr = Array.prototype.slice.call(nodeList);
console.log(arr);

以上三种方法都可以将 NodeList 转化为真正的数组，具体使用哪种方法取决于个人喜好和项目要求。

注意：上述方法返回的数组和原始 NodeList 的顺序和内容是完全一样的。因此如果原始 NodeList 是实时变化的，则转化后的数组也会实时变化。

以上就是将 NodeList 变成数组的三种方法。祝愉快编码！