JS .children返回一个对象，想要一个数组（ES6）

Question

根据w3schools page（我知道每个人最喜欢的资源），.children属性返回

  

一个实时HTMLCollection对象，表示元素的集合   节点

这个对象可以像这样的数组一样循环：

var elements = document.getElementById('test').children;

for (var i=0; i < elements.length; i++) {
  console.log(elements[i]);
}

<div id="test">
  <p>paragraph 1</p>
  
  <p>paragraph 2</p>
  
  <p>paragraph 3</p>
</div>

但是，尝试使用.map函数会引发错误：

var elements = document.getElementById('test').children;

var x = elements.map((element, index) => {
  console.log(element);
});

<div id="test">
  <p>paragraph 1</p>

  <p>paragraph 2</p>

  <p>paragraph 3</p>
</div>

是否有更好的方法来获取子DOM元素数组，或者我是否必须遍历该对象并手动创建数组才能使用.map()等数组方法？注意，我不想使用jQuery。提前谢谢。

Answer 1

.map需要一个数组。您需要将此类数组对象（HTMLCollection）转换为实数数组。有几种方法，但我最喜欢的是ES6传播，而阵列来自。

Array.from(document.getElementById('test').children).map

或传播

[...document.getElementById('test').children].map

如果您不想使用ES6，可以切片并强制进行数组转换，或[].slice.call(document.getElementById('test').children)我相信也会进行转换。

帕特里克在评论中说：[] .slice.call，而不是[] .call。可能还想提到更多罗嗦的Array.prototype.slice.call，因为它没有初始化一个未使用的空数组

这里的关键是HTMLCollection是一个对象，其中map是一个数组函数。