JS 将节点列表转换为数组 - Javascript

在JavaScript中，我们常常需要将节点列表转换为数组。节点列表是一个类数组对象，因为它们具有与数组相似的长度和索引属性，但它们不是一个真正的数组。在本文中，我们将探讨如何将节点列表转换为数组。

使用 Array.from() 方法

ES6引入了一个名为Array.from()的新方法，它可以将类数组对象（如节点列表）转换为数组。

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

上例中，我们首先使用document.querySelectorAll()方法获取页面中所有div元素的节点列表，然后将其转换为一个真正的数组。

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

在ES6之前，我们可以使用Array.prototype.slice.call()方法将节点列表转换为数组。

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

该方法利用了Array.prototype.slice()方法将一个类数组对象转换为数组。我们使用该方法的目的是将Array.prototype的原型链中的slice方法应用于nodeList对象，以返回一个数组。

使用扩展运算符

ES6还引入了一个新运算符...，也称为扩展运算符。用于在将一个数组展开（spread）到另一个数组中。

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

使用扩展运算符的好处是可以很容易地将多个数组合并到一起。

const nodeList1 = document.querySelectorAll('div');
const nodeList2 = document.querySelectorAll('p');
const arr = [...nodeList1, ...nodeList2];

总结

在本文中，我们从三个不同的角度探讨了如何将节点列表转换为数组。ES6中的新方法Array.from()是最简单和最推荐的方式。但是，现有的项目中可能会使用旧的方式Array.prototype.slice.call()来实现此目的。使用扩展运算符也是一种方便快捷的方式，特别是当需要合并多个数组时。希望本文能够帮助你更好地理解如何将节点列表转换为数组。