Javascript 在ES6中筛选或映射节点列表

在ES6中过滤或映射节点列表的最有效方法是什么

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

[...nodelist].filter

或

你推荐哪一个？还有没有更好的方法，例如不涉及阵列的方法？

• […节点列表]

  如果对象是可编辑的，则将从对象中生成一个数组

• Array.from（nodelist）

  将从对象中生成一个数组，如果该对象是可编辑的或类似于数组的（具有

  .length

  和数字道具）

如果存在

NodeList.prototype[Symbol.iterator]

，那么您的两个示例将是相同的，因为这两种情况都涉及iterables。但是，如果您的环境尚未配置为

NodeList

可移植，则第一个示例将失败，第二个示例将成功<代码>巴别塔当前

因此，如果您的

节点列表

是可编辑的，那么使用哪一个实际上取决于您自己。我可能会根据具体情况作出选择。

Array.from

的一个好处是，它接受映射函数的第二个参数，而第一个

[…iterable].map（item=>item）

必须创建一个临时数组，

Array.from（iterable，item=>item）

不会。但是，如果您没有映射列表，这并不重要。

TL；博士

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

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

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

• 对于对象引用（而不是实际对象），slice将对象引用复制到新数组中。原始数组和新数组都引用同一个对象。如果参照对象发生更改，则新阵列和原始阵列都可以看到这些更改
• 对于字符串、数字和布尔（不是字符串、数字和布尔对象），切片将值复制到新数组中。对一个数组中的字符串、数字或布尔值的更改不会影响另一个数组

关于论点的简短解释

Array.prototype.slice（beginIndex，endIndex）

• 获取可选参数beginIndex和endIndex。 如果未提供这些项，则切片将使用beginIndex==0，从而从集合中提取所有项

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

• 将对象作为第一个参数。如果我们将一个集合用作一个对象，它的字面意思是我们直接从该对象调用slice方法namespace.slice（）

我找到了一个直接在节点列表上使用

映射的

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

我还没有对它进行测试，但这似乎会更快，因为它应该直接访问节点列表。
这个怎么样：

//作恶。扩展原型。
if（window.NodeList&！NodeList.prototype.filter）{
NodeList.prototype.filter=Array.prototype.filter；
}
//像你期望的那样使用它：
const noclass=文档
.querySelectorAll（'div'））
.filter（div=>div.classList.length==0）

这与（在“Polyfill”下）中提到的方法相同，它适用于IE11、Edge、Chrome和FF。
基本上，两种方法的作用相同。如果您使用的是
babel
，那么
[…coll]
将只调用
数组。from（coll）
对于任何不是
数组的东西，
..
语法可能不受旧IDE的支持，而
数组。from（）
只是一个常规方法。感谢您提供的这个代码片段，它可能提供了一些有限的，立即帮助。一个恰当的解释将通过说明为什么这是一个很好的问题解决方案而大大提高它的长期价值，并将使它对未来有其他类似问题的读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设。我想知道这是否有IE支持，因为
Array.from
没有。是时候找一台IE机器了。现在我真的很困惑，因为我能够在IE10和IE11:\中使用Array.from。此方法在IE10+11中确实有效，但Array并没有让我轻松。当所有文档都不这么说时，Array.from对我不起作用。在IE11中，from不支持属性或方法“from”。谢谢，这对我在JavaScript
数组的旧实现中起作用。from
还返回一个浅层副本。因此，我不明白您是如何得出这样的结论：它比
数组#切片
工作得更快。稍微警告一下，现在nodeList.filter将为您提供一个数组，而不是节点列表。这应该不是问题，但很容易忘记。^^请注意，
Array.from
在IE上不受支持。@YannDìnendal这是真的，但这个问题是关于ES6的，IE根本不支持ES6，所以已经是死胡同了。是的，这是真的。：）我应该澄清一下我的意思：如果您依赖Babel将es6传输到es5，那么默认情况下它不会使用polyfill原型方法。所以这只是需要注意的事情。：）
Array.prototype.map.call(nodelist, fn)