问循环通过NodeList: Array.prototype.forEach.call() vs Array.from().forEach

EN

Array.prototype.forEach.call(nodeList, callback)将在节点列表上应用forEach的逻辑。forEach中只有一个for循环，从索引0到this.length，并对每个项调用一个回调。此方法调用传递节点列表的forEach作为其this值，因为节点列表具有类似的数组属性(length和0、1、.)，所以一切都正常。

Array.from(nodeList).forEach(callback)将从节点列表中创建一个新数组，然后在该新数组上使用forEach。第二种方法可以分成两个不言自明的行：

var newArray = Array.from(nodeList);  // create a new array out of the node list
newArray.forEach(callback);           // call forEach on the new array

第一种方法更好，因为它不创建额外的未加载资源，而且它直接在节点列表上工作。

第一种方法是ES5兼容的：

Array.prototype.forEach.call(nodeList, callback).

第二个方法使用Array.from，它仅在ES6中定义：

Array.from(nodeList).forEach(callback)

但是，这里没有优化Array.from的使用，因为您首先创建整个数组，然后使用forEach对其进行迭代。

相反，使用Array.from的第二个参数

Array.from(nodeList, callback)

现在，整个操作在一次迭代中发生。

好的是，在上面的表达式中，回调被用作映射函数，所以如果它返回一个值，那么整个表达式将返回由这些返回值定义的数组。但使用这个当然是可选的。例如，您可以创建一个数组，其中包含如下节点的文本内容：

texts = Array.from(nodeList, node => node.textContent)

警告

如果您在回调中使用Array.from，并且节点列表是一个活动节点列表(请参阅NodeList)，并且在回调中对节点列表进行了变异，那么这可能会产生意想不到的效果。在这种情况下，使用两个步骤方法，首先将节点列表转换为数组，然后对其条目执行回调。

var array=Array.from(nodeList);
//after some time
var array2=Array.from(nodeList);

如果比较这些数组，就会发现它们不一定相等。NodeLists反映了DOM的变化，当您复制它们时，数组将保持静态。如果你想要这种行为/不在乎，你会没事的。然而，Array.from是非常新的，因此它不能被旧的浏览器理解，所以它不应该在生产环境中使用(如果您不使用像Babel这样的东西)。