在 ES6 中过滤或映射节点列表的最有效方法是什么？
根据我的阅读，我会使用以下选项之一：
[...nodelist].filter
或
Array.from(nodelist).filter
你会推荐哪一个？还有没有更好的方法，例如不涉及数组？
【问题讨论】：
babel，那么[...coll] 将简单地调用Array.from(coll) 来处理不是Array 的任何内容。
... 语法可能不受旧 IDE 支持，而 Array.from() 只是一种常规方法。
标签： javascript arrays filter ecmascript-6 nodelist
[...nodelist] 将从对象中创建一个数组。Array.from(nodelist) 将从对象中创建一个数组或如果对象是类数组（具有.length 和数字道具）如果存在NodeList.prototype[Symbol.iterator]，您的两个示例将是相同的，因为这两种情况都涵盖了可迭代对象。但是，如果您的环境尚未配置为 NodeList 是可迭代的，那么您的第一个示例将失败，而第二个示例将成功。 Babel 目前does not handle this case properly。
因此，如果您的 NodeList 是可迭代的，那么您使用哪个完全取决于您。我可能会根据具体情况进行选择。 Array.from 的一个好处是它接受映射函数的第二个参数，而第一个 [...iterable].map(item => item) 必须创建一个临时数组，Array.from(iterable, item => item) 不会。但是，如果您不映射列表，那也没关系。
【讨论】：
Array.from 不支持 IE。
TL;DR;
Array.prototype.slice.call(nodelist).filter
slice() 方法返回一个数组。
返回的数组是集合（NodeList）的浅表副本
所以它比 Array.from() 运行得更快
所以它的运行速度与 Array.from()
原始集合的元素被复制到返回的数组中，如下所示：
关于论点的简短说明
Array.prototype.slice(beginIndex, endIndex)
Array.prototype.slice.call(namespace, beginIndex, endIndex)
【讨论】：
Array.from 不支持。是时候找一台IE机器了。现在我真的很困惑，因为我能够在 IE10 和 IE11 中使用 Array.from :\。此方法在 IE10+11 中确实有效，但当所有文档另有说明时，Array.from 工作并没有让我感到轻松。
Array.from 在 IE11 中对我不起作用 对象不支持“来自”的属性或方法
Array.from 也返回一个浅拷贝。所以我看不出你是如何得出结论它比Array#slice运行得更快。
我发现一个reference 直接在NodeList 上使用map by
Array.prototype.map.call(nodelist, fn)
我还没有测试过它，但它似乎会更快，因为它应该直接访问 NodeList。
【讨论】：
这个怎么样：
// 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)
这与the MDN docs for NodeList.forEach（在“Polyfill”下）中提到的方法相同，它适用于 IE11、Edge、Chrome 和 FF。
【讨论】：
在 ES6 中过滤或映射节点列表
我是从这个简单的功能中走出来的。 @见https://developer.mozilla.org/fr/docs/Web/API/NodeList/entries#exemple
function filterNodeList(NodeList, callback) {
if (!typeof callback === "function") callback = (i) => i; // Any have better idear?
const Result = document.createElement("div");
//# No need to filter empty NodeList
if (Node.length === 0) return Node;
for (let i = 0; i < Node.length; i++) {
if (callback(Node.item(i))) Result.appendChild(Node.item(i));
}
return Result.childNodes;}
我愿意了解更多：>
【讨论】：
[...a].filter 与 Array.from(a).filter
不是“真正的”性能差异，Array.from 可能会快一点，因为您没有在“JS 级别”上创建新的Array，但它直接发生在本机代码中。
但是为了性能（也为了避免“Array-ing”）你应该考虑为什么你过滤NodeList和where/你是怎么得到它的。在许多情况下，您只需要 id 或 class 或其他 CSS 选择器的特定元素。
document.querySelectorAll 就像 10x - 200x 快，适用于任何 CSS 选择器
document.getElementById 更快（当然需要id）
你甚至可以优化querySelectorAll或绕过“未知”的情况，如果你提供一个预存的父项来查看，让我举个例子：
let mainbar = document.getElementById('mainbar');
mainbar.querySelectorAll('.flex--item');
比
快近 10 倍Array.from(a).filter(el => el.classList.contains("flex--item"))
还要注意，document.querySelectorAll('#mainbar .flex--item'); 仍然比 Array 过滤快大约 5 倍，但比使用 id 预存储父级慢大约 2 倍。
NodeList（它可能是空的，但它仍然是NodeList），这适用于document.querySelectorAll() 和Element.querySelectorAll()
【讨论】：