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

Question

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

A live HTMLCollection object, representing a collection of element nodes

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

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) 转换为一个真正的数组。有几种方法，但我最喜欢的 2 个是 ES6 spread 和 array from.

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

或传播

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

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

正如 Patrick 在评论中所说：[].slice.call，而不是 [].call。可能还想提及更冗长的 Array.prototype.slice.call 因为它不会初始化未使用的空数组

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

JS .children Returns an Object, Want an Array (ES6)