[].slice.call() pattern in javascript [duplicate]答案

【问题标题】：[].slice.call() pattern in javascript [duplicate][].slice.call() pattern in javascript [duplicate]
【发布时间】：2021-07-21 03:20:19
【问题描述】：

Bootstrap 5 Javascript examples sometimes show code like:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))

为什么不只是这样：

var collapseElementList = document.querySelectorAll('.collapse')

[].slice.call() 到底在做什么？我不明白你为什么要把slice 放在一个空数组上，然后我不知道call 在那里做什么。上述第二种方法的明显方法会有什么问题？

【问题讨论】：

stackoverflow.com/questions/2125714/…

标签： javascript twitter-bootstrap

【解决方案1】：

querySelectorAll 返回一个 NodeList，它是一个集合，而不是一个数组。

[].slice.call 将类似数组的集合转换为适当的数组。它将允许您在其上使用数组方法，例如：

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'));
const textsOfCollapsedElements = collapseElementList.map(elm => elm.textContent);

否则，如果不先将其转换为数组，将无法对其使用数组方法。

这对forEach 来说可能是最重要的。较新的浏览器支持NodeList.prototype.forEach，但它并没有出现在我们身边那么。相比之下，Array.prototype.forEach 则永远存在。因此，将集合转换为数组允许在其上调用 forEach，即使在不支持 NodeList.prototype.forEach 的过时浏览器上也是如此。

【讨论】：

【解决方案2】：

这是一个习惯用法，通过利用 Array::slice 可以处理任何可迭代且具有 .length 属性的事实，将任何数组（在本例中为 DOM NodeList）转换为真正的数组。

现代成语是Array.from(...)。

【讨论】：