如何在javascript中将集合转换为数组

Posted 2023-02-25

【中文标题】如何在javascript中将集合转换为数组

【英文标题】：How to convert a collection to an array in javascript

【发布时间】：2011-07-06 17:05:32

【问题描述】：

我正在尝试弄清楚如何将 javascript 集合（即从 getElementsByTagName/etc 返回的内容）转换为普通数组，以便我可以对数据执行数组函数。

我正在寻找一个不使用任何库的解决方案，并且无法在网上任何地方找到任何优雅的解决方案。有没有人为这个问题写了一个很好的 util 函数？

【参考方案1】：

你可以这样做：

var coll = document.getElementsByTagName('div');

var arr = Array.prototype.slice.call( coll, 0 );

---

编辑： 正如@Chris Nielsen 所指出的，这在 IE 9 之前的版本中失败了。最好是做一些功能测试，然后创建一个可以处理其中任何一个的函数，或者像 the (second) solution 中的 @brilliand 那样做一个循环。

【讨论】：

或者节省一些输入：[].slice.call(document.getElementsByTagName('div'), 0);

@lwburk：是的，但我个人不会仅仅为了获得.slice() 而构建一个新数组，特别是如果我要多次使用它。尽管我认为您的较短版本是创建可重用参考的一种方式。 var slice = [].slice; /*...*/ slice.call( coll, 0 );

这在 IE6、IE7 和 IE8 中失败。在 IE9 中工作。

【参考方案2】：

这在现代浏览器中变得简单多了。我将概述两种方法。

扩展运算符

“扩展语法允许扩展可迭代 (...)”

const divs = document.getElementsByTagName('div');
const myArray = [...divs]; // [div, div, ...]

Array.from

Array.from "从类数组或可迭代对象创建一个新的 Array 实例"

示例：将 HTML 集合转换为数组

const divs = document.getElementsByTagName('div');
const myArray = Array.from(divs); // [div, div, ...]

【参考方案3】：

将其复制到常规数组中？

var coll = document.getElementsByTagName('div');
var arr = [];
for(var i in coll) arr[i] = coll[i];

自从我使用 JavaScript 以来已经有一段时间了......你可能需要这个来代替：

var coll = document.getElementsByTagName('div');
var arr = [];
for(var i = 0; i < coll.length; i++) arr.push(coll[i]);

【讨论】：

+1 用于正确处理 IE。第二种解决方案更适合 javascript。

【参考方案4】：

您可以使用扩展运算符：

var coll = document.getElementsByTagName('div');

var arr = [...coll];

Spread syntax

【讨论】：

这个答案被低估了！