NodeList 转数组，哪种方式最给力？性能测试助你决胜千里

将 NodeList 快速转换为数组：掌握高效方法

作为一名经验丰富的程序员和技术作家，经常会遇到需要处理 NodeList 的场景。NodeList 是 JavaScript 中表示文档中元素集合的对象。将其转换为数组是一个常见的需求，但选择高效的方法至关重要。

本文将深入探讨将 NodeList 转换为数组的最佳方法，并通过性能比较来指导您做出明智的选择。

常见转换方法

有四种常见的方法可以将 NodeList 转换为数组：

1. Array.prototype.slice.call()： 这种方法使用 Array.prototype.slice() 函数创建 NodeList 的副本并将其转换为数组。

2. 扩展运算符（...）： 扩展运算符可以将类似数组的对象展开为数组，对于 NodeList，可以使用语法 [...nodeList]。

3. Array.from()： Array.from() 函数可以将可迭代对象转换为数组，对于 NodeList，可以使用语法 Array.from(nodeList)。

4. for 循环： 也可以使用 for 循环手动创建数组，如下所示：

for (var i = 0; i < nodeList.length; i++) {
  arr.push(nodeList[i]);
}

性能比较

在不同的浏览器和 JavaScript 引擎中，这些方法的性能可能有所不同。以下是一些基准测试结果，以帮助您了解它们的相对性能：

方法	性能
扩展运算符（...）	最快
Array.from()	次快
Array.prototype.slice.call()	中等
for 循环	最慢

最佳选择

根据基准测试结果，扩展运算符（...） 和Array.from() 在大多数情况下是最快的。它们是将 NodeList 转换为数组的推荐方法。

代码示例

以下代码示例展示了如何使用扩展运算符将 NodeList 转换为数组：

const nodeList = document.querySelectorAll('li');
const arr = [...nodeList];

结论

通过了解将 NodeList 转换为数组的不同方法及其性能，您可以选择最适合您特定需求的方法。扩展运算符（...）和 Array.from() 提供了最佳性能，并简化了转换过程。

常见问题解答

1. 什么是 NodeList？
NodeList 是 JavaScript 中表示文档中元素集合的对象。

2. 为什么需要将 NodeList 转换为数组？
数组比 NodeList 具有更多的方法和属性，因此有时需要进行转换以充分利用 JavaScript 功能。

3. 哪种方法最适合将 NodeList 转换为数组？
扩展运算符（...）和 Array.from() 是性能最佳的方法。

4. 如何在 forEach 循环中使用转换后的数组？
您可以使用语法 Array.from(nodeList).forEach() 直接在 forEach 循环中使用转换后的数组。

5. NodeList 转换与 Array.from() 有什么区别？
NodeList 转换会创建一个副本，而 Array.from() 会直接返回一个数组引用。