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

Question

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

我想寻找一个不使用任何库的解决方案，在网上还没有找到任何优雅的解决方案。是否有人为这个问题编写了一个好的实用函数？

- wajiw

Answer 1

你可以这样做：

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

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

编辑： 如@Chris Nielsen所指出的，此方法不适用于IE 9及以下版本。最好的方法是进行一些功能测试，并创建一个可以处理任何情况的函数，或者像这个解决方案中@brilliand一样进行循环。

- user113716

---

可以简化为：Array.from(document.getElementsByTagName('div')); 该代码的作用是将页面中所有的 <div> 元素转换为数组。 - Wayne

@lwburk: 确实如此，但我个人不会仅仅为了使用.slice()而构造一个新的数组，特别是如果我将要多次使用它。虽然我会考虑你的更短版本作为创建可重用引用的一种方式。var slice = [].slice; /*...*/ slice.call( coll, 0 ); - user113716

这在IE6、IE7和IE8中失败。在IE9中可以工作。 - Chris Nielsen

Answer 2

这在现代浏览器中变得简单多了。我将概述两种方法，这两种方法都得到了自2016年以来所有主要浏览器（Chrome，Edge，Safari，Firefox，Opera）的支持。

扩展运算符

“扩展语法允许将可迭代对象（...）展开”

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

Array.from

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

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

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

- sqren

Answer 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]);

- Brilliand

---

+1 是为了正确处理IE浏览器。第二种解决方案更适用于JavaScript。 - user113716

Answer 4

您可以使用扩展运算符：

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

var arr = [...coll];

展开语法

- Jiml

---

这个回答被低估了！ - progyammer

Answer 5

你可以使用 Array.from，因为它从可迭代对象创建一个新的浅拷贝数组实例。所以 HTMLCollection 是文档元素的集合。

因此，我们可以使用 Array.from 将其转换为数组，然后使用 forEach 迭代其数组元素。

let  coll = document.getElementsByTagName('div');
let  ary= Array.from(col1);
Array.from(col1).forEach((elm=>elm.innextText='Example'));

- Frank L.