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

14 浏览
0 Comments

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

根据其w3schools页面（众所周知的资源，我知道），.children属性返回一个表示元素节点集合的动态 HTMLCollection 对象。可以像数组一样循环遍历该对象，例如：

var elements = document.getElementById('test').children;
for (var i=0; i < elements.length; i++) {
  console.log(elements[i]);
}

  段落1
  段落2
  段落3

然而，尝试使用.map函数会抛出错误：

var elements = document.getElementById('test').children;
var x = elements.map((element, index) => {
  console.log(element);
});

  段落1
  段落2
  段落3

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

0

1 答案

0 Comments

在上述内容中，问题的出现原因是.map函数期望传入一个数组，而.children返回的是一个类数组对象(HTMLCollection)。解决这个问题的方法有多种，但我个人喜欢使用ES6中的spread运算符和Array.from函数。

使用Array.from方法可以将HTMLCollection转换为真正的数组，示例代码如下：

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

另一种方法是使用spread运算符，示例代码如下：

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

如果不想使用ES6，可以使用slice方法进行切片，并强制进行数组转换，示例代码如下：

[].slice.call(document.getElementById('test').children)

另外，Patrick在评论中提到应该使用[].slice.call，而不是[].call。如果不想初始化一个未使用的空数组，也可以使用更冗长的Array.prototype.slice.call方法。

关键在于HTMLCollection是一个对象，而map函数是一个数组方法。

感谢你的帮助！我明白了它不是一个数组，需要进行转换。你知道使用Array.from()和spread方法之间是否存在效率差异吗？我可以使用ES6。还可以直接在map函数上使用call方法，示例代码如下：

Array.prototype.map.call(element.children, mappingFunction)

0