javascript - JS .children 返回一个对象，想要一个数组(ES6)

<分区>

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

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。提前致谢。

最佳答案

.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 是一个数组函数。

关于javascript - JS .children 返回一个对象，想要一个数组(ES6)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37821627/

相关文章：

java - 从自定义模型生成 Java 类