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

Question

根据其 w3schools 页面（众所周知，是每个人最喜欢的资源），.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。提前致谢。

- dougmacklin

---

Array.from(elements) 数组. - Patrick Roberts

你想通过使用.map实现什么目的？ - putvande

感谢@PatrickRoberts，相信我和其他人一样也遇到了w3schools的问题，但是每个关于.children的搜索结果都讨论了jQuery方法。 - dougmacklin

@putvande 我需要将 <div> 的内容转换为 JSON 数组。 - dougmacklin

很酷，我一直在寻找有关.children的更多信息，抱歉没有搜索htmlcollection。然而，那个问题已经8年了，不包含@SterlingArcher提出的ES6解决方案，我将使用它。感谢你的帮助Patrick。 - dougmacklin

Answer 1

.map需要一个数组。你需要将这个类似数组的对象（HTMLCollection）转换为真正的数组。有几种方法，但我的两个最喜欢的是ES6扩展运算符和数组from方法。

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

或者传播

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

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

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

关键在于HTMLCollection是一个对象，其中map是一个数组函数。

- Sterling Archer

---

糟糕，好发现！ - Sterling Archer

谢谢你的帮助@SterlingArcher！我知道它不是一个数组，需要转换。你知道Array.from()和扩展运算符之间的效率差异吗？我可以使用ES6。 - dougmacklin

你也可以直接使用 Array.prototype.map.call( element.children, mappingFunction) 对地图进行调用。这段代码意思是将mappingFunction函数应用于element下的每个子元素，并将结果以数组的形式返回。 - ashwell