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

【问题标题】：How to convert a collection to an array in javascript如何在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 实例"

示例：将 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]);

【讨论】：

【解决方案4】：

您可以使用扩展运算符：

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

var arr = [...coll];

【讨论】：