blocks|key|1075359|text|Array.prototype.forEach.call(nodeList,+callback)将在节点列表上应用forEach的逻辑。forEach中只有一个for循环，从索引0到this.length，并对每个项调用一个回调。此方法调用传递节点列表的forEach作为其this值，因为节点列表具有类似的数组属性(length和0、1、.)，所以一切都正常。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1075360|Array.from(nodeList).forEach(callback)将从节点列表中创建一个新数组，然后在该新数组上使用forEach。第二种方法可以分成两个不言自明的行：|1075361|var+newArray+=+Array.from(nodeList);++//+create+a+new+array+out+of+the+node+list
newArray.forEach(callback);+++++++++++//+call+forEach+on+the+new+array|code-block|syntax|javascript|1075362|第一种方法更好，因为它不创建额外的未加载资源，而且它直接在节点列表上工作。|1075363|entityMap^0|0|1C|1L|7|1W|7|28|3|2H|1|2J|B|3J|7|3T|4|4F|6|4M|1|4O|1|0|0|12|1R|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|P|$]]

<code>Array.prototype.forEach.call(nodeList, callback)</code> will apply the logic of <code>forEach</code> on the node list. <code>forEach</code> just have a <code>for</code> loop in it that goes from index <code>0</code> to <code>this.length</code> and calling a callback on each of the items. This method is calling <code>forEach</code> passing the node list as its <code>this</code> value, since node lists have similar properties of an array (<code>length</code> and <code>0</code>, <code>1</code>, ...), everything works fine.

<code>Array.from(nodeList).forEach(callback)</code> will create a new array from the node list, then use <code>forEach</code> on that new array. This second method could be split into two self explanatory lines:

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

The first approach is better because it doesn't create additional uneeded resources and it work on node lists directly.

blocks|key|1075057|text|var+array=Array.from(nodeList);
//after+some+time
var+array2=Array.from(nodeList);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1075058|如果比较这些数组，就会发现它们不一定相等。NodeLists反映了DOM的变化，当您复制它们时，数组将保持静态。如果你想要这种行为/不在乎，你会没事的。然而，Array.from是非常新的，因此它不能被旧的浏览器理解，所以它不应该在生产环境中使用(如果您不使用像Babel这样的东西)。|unstyled|1075059|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var array=Array.from(nodeList);
//after some time
var array2=Array.from(nodeList);
</code></pre>

If you compare these Arrays youll see that they are not necessarily equal. NodeLists reflect the change of the DOM, as you copy them the arrays stay static. If you want this behaviour / dont care about youre fine. However Array.from is quite new, therefore it isnt understood by older browsers, so it shouldnt be used in productional environments ( if youre not using sth like Babel).

blocks|key|912382|text|第一种方法是ES5兼容的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|912383|Array.prototype.forEach.call(nodeList,+callback).|code-block|syntax|javascript|912384|第二个方法使用Array.from，它仅在ES6中定义：|offset|length|style|CODE|912385|Array.from(nodeList).forEach(callback)|912386|但是，这里没有优化Array.from的使用，因为您首先创建整个数组，然后使用forEach对其进行迭代。|912387|相反，使用Array.from的第二个参数|912388|Array.from(nodeList,+callback)|912389|现在，整个操作在一次迭代中发生。|912390|好的是，在上面的表达式中，回调被用作映射函数，所以如果它返回一个值，那么整个表达式将返回由这些返回值定义的数组。但使用这个当然是可选的。例如，您可以创建一个数组，其中包含如下节点的文本内容：|912391|texts+=+Array.from(nodeList,+node+=>+node.textContent)|912392|警告|912393|如果您在回调中使用Array.from，并且节点列表是一个活动节点列表(请参阅NodeList)，并且在回调中对节点列表进行了变异，那么这可能会产生意想不到的效果。在这种情况下，使用两个步骤方法，首先将节点列表转换为数组，然后对其条目执行回调。|912394|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/NodeList^0|0|0|7|A|0|0|9|A|13|7|0|5|A|0|0|0|0|0|0|9|A|13|8|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1E|8|@$I|1F|J|1G|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1I|8|@$I|1J|J|1K|K|L]|$I|1L|J|1M|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@$I|1O|J|1P|K|L]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1T|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1U|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1V|8|@$I|1W|J|1X|K|L]]|9|@$I|1Y|J|1Z|1|20]]|A|$]]|$1|14|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

The first method is ES5 compatible:
<pre><code>Array.prototype.forEach.call(nodeList, callback).
</code></pre>
The second method uses <code>Array.from</code> which was only defined in ES6:
<pre><code>Array.from(nodeList).forEach(callback)
</code></pre>
However, you are not optimising the use of <code>Array.from</code> here, because you first create the whole array, and then iterate over it with <code>forEach</code>.
Instead use the second argument of <code>Array.from</code>:
<pre><code>Array.from(nodeList, callback)
</code></pre>
Now the whole operation happens in one iteration.
The nice thing is that in the above expression, the callback is used as a mapping function, so if it returns a value, the whole expression returns the array as defined by those return values. But using this is of course optional. For instance, you could create an array with the text contents of the nodes like this:
<pre><code>texts = Array.from(nodeList, node =&gt; node.textContent)
</code></pre>
<h3>Warning</h3>
If you use <code>Array.from</code> with callback, and the node list is a live node list (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList" rel="nofollow noreferrer">NodeList</a>), and you mutate the node list in the callback, then this can have undesired effects. In that case use the two step method where you first turn the node list into an array, and only then perform the callback on its entries.

So I want an easy way to loop through nodelists, and I always hated that I can't use <code>forEach</code> on nodeLists.

So, now I do: <code>Array.prototype.forEach.call(nodeList, callback)</code>.

and for index, i do: <code>Array.prototype.indexOf.call(nodeList, node)</code>.

and for pretty much everything I use Array.prototype on nodeLists.

But I'm wondering if these are considered hacks?

Are they the right way to do it?

Also, assuming I don't actually need an array from nodeList, is there an advantage of using <code>Array.from(nodeList).forEach(callback)</code> instead?

Loop through NodeList: Array.prototype.forEach.call() vs Array.from().forEach

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

因此，我希望找到一种简单的方法来遍历nodelists，而且我一直讨厌不能在nodeLists上使用nodeLists。所以，现在我知道了：Array.prototype.forEach.call(nodeList, callback)。对于索引，我需要：Array.prototype.indexOf.call(nod...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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