在ES6中过滤或映射节点列表

Question 1

在ES6中筛选或映射节点列表的最有效方法是什么？

根据我的阅读，我将使用以下选项之一：

[...nodelist].filter

要么

Array.from(nodelist).filter

您会推荐哪一个？是否有更好的方法，例如不涉及数组？

Question 2

[...nodelist] 如果对象是可迭代的，则将由对象组成数组。
Array.from(nodelist)如果对象是可迭代的，或者对象是类似数组的对象（具有.length数字道具），则将从对象中组成一个数组

如果NodeList.prototype[Symbol.iterator]存在，您的两个示例将是相同的，因为这两种情况都涉及可迭代。如果您的环境尚未配置NodeList为可迭代，则第一个示例将失败，第二个示例将成功。Babel目前无法正确处理这种情况。

所以如果你 NodeList是可迭代的，则取决于您所使用的。我可能会视情况选择。这样做的一个好处Array.from是，它需要一个映射函数的第二个参数，而第一个[...iterable].map(item => item)则必须创建一个临时数组，Array.from(iterable, item => item)而不必。但是，如果您不映射列表，则没关系。

Question 3

TL; DR;

Array.prototype.slice.call(nodelist).filter

slice（）方法返回一个数组。返回的数组是集合（NodeList）的浅表副本，因此它比Array.from（）~~更快地~~ 工作，因此它与Array.from（）一样快。

原始集合的元素被复制到返回的数组中，如下所示：

对于对象引用（而不是实际对象），切片将对象引用复制到新数组中。原始数组和新数组都引用同一对象。如果引用的对象发生更改，则更改对新数组和原始数组均可见。
对于字符串，数字和布尔值（不是字符串，数字和布尔对象），切片将值复制到新数组中。一个数组中的字符串，数字或布尔值的更改不会影响另一数组。

关于论点的简短解释

Array.prototype.slice（beginIndex，endIndex）

采用可选的参数beginIndex和endIndex。如果未提供切片，则切片使用beginIndex == 0，因此它将从集合中提取所有项目

Array.prototype.slice.call（命名空间，beginIndex，endIndex）

将对象作为第一个参数。如果我们使用集合作为对象，则从字面上意味着我们直接从该对象的namespace调用slice方法。slice（）

Question 4

我找到了一个引用，它map直接在NodeList上使用

Array.prototype.map.call(nodelist, fn)

我没有测试过，但是这样做似乎更快，因为它应该直接访问NodeList。

Question 5

这个怎么样：

// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
  NodeList.prototype.filter = Array.prototype.filter;
}

// Use it like you'd expect:
const noClasses = document
  .querySelectorAll('div')
  .filter(div => div.classList.length === 0)

这与MDN文档中针对NodeList.forEach（在“ Polyfill”下）提到的方法相同，适用于IE11，Edge，Chrome和FF。