如何在JavaScript中将可迭代对象转换为数组?
JavaScript ES6引入了许多新特性,其中包括扩展运算符(...
),它允许在期望零个或多个参数或元素的位置上展开可迭代对象。
我们可以使用扩展运算符将可迭代对象(有时也称为类数组)转换为数组。让我们看一些例子:
字符串
当将扩展运算符应用于字符串时,结果是一个由原始字符串的每个字符表示的字符串数组:
const name = 'Zelda';
const letters = [...name]; // 'Z', 'e', 'l', 'd', 'a'
Set
Set
是一组唯一值的集合。当将扩展运算符应用于Set时,结果是存储的值的数组:
const data = [1, 2, 3, 1, 2, 4]
const values = new Set(data);
const uniqueValues = [...values]; // [1, 2, 3, 4]
[!NOTE]
上面的例子是获取数组中唯一元素的基本方法。
NodeList
NodeList 是一组节点的集合,由诸如 Document.childNodes()
或 Document.querySelectorAll()
等方法返回。虽然它实现了一些帮助将其作为数组进行操作的方法(例如 NodeList.prototype.forEach()
),但通常希望将其转换为数组。当使用扩展运算符应用于它时,结果是包含的节点的数组:
const nodes = document.childNodes;
const nodeArray = [...nodes]; // [ <!DOCTYPE html>, html ]
请注意,上面的示例是 nodeListToArray 代码片段 的基础。