将 JavaScript NodeList 转换为数组的最快方法

在 JavaScript 中，我们经常需要将 NodeList 对象转换为数组。NodeList 是一个对象，表示一组由文档结构返回的节点。虽然 NodeList 可以使用索引访问其元素，但它不是一个真正的数组。本文将介绍如何将 NodeList 对象转换为数组，并提供最快的方法。

方法一：使用Array.from()

ES6 引入了 Array.from() 方法，可以将类数组对象或可迭代对象转换为数组。NodeList 对象是一个类数组对象，可以使用 Array.from() 方法将其转换为数组。

const nodeList = document.querySelectorAll('p');
const array = Array.from(nodeList);

方法二：使用Array.prototype.slice()

另一种将 NodeList 对象转换为数组的方法是使用 Array.prototype.slice() 方法。与 Array.from() 方法不同，该方法不会创建中间数组，从而提高了效率。

const nodeList = document.querySelectorAll('p');
const array = Array.prototype.slice.call(nodeList);

需要注意的是，在 IE8 及以下版本的浏览器中，NodeList 对象不是一个真正的对象，不能使用 Array.prototype.slice() 方法。

方法三：使用展开运算符

展开运算符是 ES6 中的一个新特性。它可以将任何可迭代的对象转换为数组。因此，我们可以使用展开运算符将 NodeList 对象转换为数组。

const nodeList = document.querySelectorAll('p');
const array = [...nodeList];

需要注意的是，与 Array.from() 方法相同，展开运算符也会创建一个中间数组。

总结

在本文中，我们介绍了将 NodeList 对象转换为数组的三种方法。如果您正在使用新版本的浏览器，请使用 Array.from() 方法或展开运算符。如果您需要兼容较老的浏览器，请使用 Array.prototype.slice.call() 方法。无论您使用哪种方法，都可以高效地将 NodeList 对象转换为数组。