blocks|key|782224|text|Array.forEach是为无需等待的计算而设计的，在事件循环中进行异步计算没有任何好处(如果您需要多核计算，webworkers会添加多处理)。如果您希望等待多个任务结束，请使用计数器，您可以将其包装在信号量类中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|782225|entityMap^0|0|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>Array.forEach</code> is meant for computing stuff not waiting, and there is nothing to be gained making computations asynchronous in an event loop (webworkers add multiprocessing, if you need multi-core computation). If you want to wait for multiple tasks to end, use a counter, which you can wrap in a semaphore class.</p>


blocks|key|996504|text|如果你需要一个异步友好的Array.forEach或类似的版本，可以在Node.js+'async‘模块中找到：http://github.com/caolan/async+...as这个模块也可以在浏览器中使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|996505|async.each(openFiles,+saveFile,+function(err){
++++//+if+any+of+the+saves+produced+an+error,+err+would+equal+that+error
});|code-block|syntax|javascript|996506|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/caolan/async^0|C|D|1K|U|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>If you need an asynchronous-friendly version of <code>Array.forEach</code> and similar, they're available in the Node.js 'async' module: <a href="http://github.com/caolan/async" rel="noreferrer">http://github.com/caolan/async</a> ...as a bonus this module also works in the browser.</p>

<pre><code>async.each(openFiles, saveFile, function(err){
    // if any of the saves produced an error, err would equal that error
});
</code></pre>


blocks|key|782266|text|这是一个简短的异步函数，无需第三方库即可使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782267|Array.prototype.each+=+function+(iterator,+callback)+{
++++var+iterate+=+function+()+{
++++++++++++pointer%2B%2B;
++++++++++++if+(pointer+>=+this.length)+{
++++++++++++++++callback();
++++++++++++++++return;
++++++++++++}
++++++++++++iterator.call(iterator,+this[pointer],+iterate,+pointer);
++++}.bind(this),
++++++++pointer+=+-1;
++++iterate(this);
};|code-block|syntax|javascript|782268|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is a short asynchronous function to use without requiring third party libs</p>

<pre><code>Array.prototype.each = function (iterator, callback) {
    var iterate = function () {
            pointer++;
            if (pointer &gt;= this.length) {
                callback();
                return;
            }
            iterator.call(iterator, this[pointer], iterate, pointer);
    }.bind(this),
        pointer = -1;
    iterate(this);
};
</code></pre>


blocks|key|782286|text|在npm上有一个用于easy+asynchronous+for+each+loops的包。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|782287|var+forEachAsync+=+require('futures').forEachAsync;

//+waits+for+one+request+to+finish+before+beginning+the+next+
forEachAsync(['dogs',+'cats',+'octocats'],+function+(next,+element,+index,+array)+{
++getPics(element,+next);
++//+then+after+all+of+the+elements+have+been+handled+
++//+the+final+callback+fires+to+let+you+know+it's+all+done+
++}).then(function+()+{
++++console.log('All+requests+have+finished');
});|code-block|syntax|javascript|782288|还有另一种变体forAllAsync|782289|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/forEachAsync|1|https://www.npmjs.com/package/forallasync^0|F|R|0|0|0|7|B|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>There is a package on npm for easy <a href="https://www.npmjs.com/package/forEachAsync" rel="nofollow noreferrer">asynchronous for each loops</a>.</p>

<pre><code>var forEachAsync = require('futures').forEachAsync;

// waits for one request to finish before beginning the next 
forEachAsync(['dogs', 'cats', 'octocats'], function (next, element, index, array) {
  getPics(element, next);
  // then after all of the elements have been handled 
  // the final callback fires to let you know it's all done 
  }).then(function () {
    console.log('All requests have finished');
});
</code></pre>

<p>Also another variation <a href="https://www.npmjs.com/package/forallasync" rel="nofollow noreferrer">forAllAsync</a></p>


blocks|key|782322|text|甚至可以像这样编写解决方案，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782323|+var+loop+=+function(i,+data,+callback)+{
++++if+(i+<+data.length)+{
++++++++//TODO("SELECT+*+FROM+stackoverflowUsers;",+function(res)+{
++++++++++++//data[i].meta+=+res;
++++++++++++console.log(i,+data[i].title);
++++++++++++return+loop(i%2B1,+data,+errors,+callback);
++++++++//});
++++}+else+{
+++++++return+callback(data);
++++}
};

loop(0,+[{"title":+"hello"},+{"title":+"world"}],+function(data)+{
++++console.log("DONE\n"%2Bdata);
});|code-block|syntax|javascript|782324|另一方面，它比"for“慢得多。|782325|否则，优秀的异步库可以做到这一点：https://caolan.github.io/async/docs.html#each|offset|length|782326|entityMap|0|LINK|mutability|MUTABLE|url|https://caolan.github.io/async/docs.html#each^0|0|0|0|H|19|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>It is possible to code even the solution like this for example :</p>

<pre><code> var loop = function(i, data, callback) {
    if (i &lt; data.length) {
        //TODO("SELECT * FROM stackoverflowUsers;", function(res) {
            //data[i].meta = res;
            console.log(i, data[i].title);
            return loop(i+1, data, errors, callback);
        //});
    } else {
       return callback(data);
    }
};

loop(0, [{"title": "hello"}, {"title": "world"}], function(data) {
    console.log("DONE\n"+data);
});
</code></pre>

<p>On the other hand, it is much slower than a "for".</p>

<p>Otherwise, the excellent Async library can do this: <a href="https://caolan.github.io/async/docs.html#each" rel="nofollow noreferrer">https://caolan.github.io/async/docs.html#each</a></p>


blocks|key|782381|text|下面是一个小示例，您可以运行它来测试它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782382|[1,2,3,4,5,6,7,8,9].forEach(function(n){
++++var+sum+=+0;
++++console.log('Start+for:'+%2B+n);
++++for+(var+i+=+0;+i+<+(+10+-+n)+*+100000000;+i%2B%2B)
++++++++sum%2B%2B;

++++console.log('Ended+for:'+%2B+n,+sum);
});|code-block|syntax|javascript|782383|它会产生类似这样的结果(如果花费的时间太少/太多，增加/减少迭代次数)：|782384|(index):48+Start+for:1
(index):52+Ended+for:1+900000000
(index):48+Start+for:2
(index):52+Ended+for:2+800000000
(index):48+Start+for:3
(index):52+Ended+for:3+700000000
(index):48+Start+for:4
(index):52+Ended+for:4+600000000
(index):48+Start+for:5
(index):52+Ended+for:5+500000000
(index):48+Start+for:6
(index):52+Ended+for:6+400000000
(index):48+Start+for:7
(index):52+Ended+for:7+300000000
(index):48+Start+for:8
(index):52+Ended+for:8+200000000
(index):48+Start+for:9
(index):52+Ended+for:9+100000000
(index):45+[Violation]+'load'+handler+took+7285ms|782385|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here is a small example you can run to test it:</p>

<pre><code>[1,2,3,4,5,6,7,8,9].forEach(function(n){
    var sum = 0;
    console.log('Start for:' + n);
    for (var i = 0; i &lt; ( 10 - n) * 100000000; i++)
        sum++;

    console.log('Ended for:' + n, sum);
});
</code></pre>

<p>It will produce something like this(if it takes too less/much time, increase/decrease the number of iterations):</p>

<pre><code>(index):48 Start for:1
(index):52 Ended for:1 900000000
(index):48 Start for:2
(index):52 Ended for:2 800000000
(index):48 Start for:3
(index):52 Ended for:3 700000000
(index):48 Start for:4
(index):52 Ended for:4 600000000
(index):48 Start for:5
(index):52 Ended for:5 500000000
(index):48 Start for:6
(index):52 Ended for:6 400000000
(index):48 Start for:7
(index):52 Ended for:7 300000000
(index):48 Start for:8
(index):52 Ended for:8 200000000
(index):48 Start for:9
(index):52 Ended for:9 100000000
(index):45 [Violation] 'load' handler took 7285ms
</code></pre>


blocks|key|996732|text|虽然Array.forEach不是异步的，但是你可以得到异步的“最终结果”。示例如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|996733|​|996734|function+delayFunction(x)+{
++++return+new+Promise(
++++++++(resolve)+=>+setTimeout(()+=>+resolve(x),+1000)
++++);
}

[1,+2,+3].forEach(async(x)+=>+{
++++console.log(x);
++++console.log(await+delayFunction(x));
});|code-block|syntax|javascript|996735|996736|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Although Array.forEach is not asynchronous, you can get asynchronous &quot;end result&quot;. Example below:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function delayFunction(x) {
    return new Promise(
        (resolve) =&gt; setTimeout(() =&gt; resolve(x), 1000)
    );
}

[1, 2, 3].forEach(async(x) =&gt; {
    console.log(x);
    console.log(await delayFunction(x));
});</code></pre>
</div>
</div>
</p>


blocks|key|782478|text|这些代码片段将使您更好地理解forEach和forOf的比较。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782479|​|782480|/*+eslint-disable+no-console+*/
async+function+forEachTest()+{
++++console.log('###########+Testing+forEach+################+')
++++console.log('start+of+forEachTest+func')
++++let+a+=+[1,+2,+3]
++++await+a.forEach(async+(v)+=>+{
++++++++console.log('start+of+forEach:+',+v)
++++++++await+new+Promise(resolve+=>+setTimeout(resolve,+v+*+1000))
++++++++console.log('end+of+forEach:+',+v)
++++})
++++console.log('end+of+forEachTest+func')
}
forEachTest()


async+function+forOfTest()+{
++++await+new+Promise(resolve+=>+setTimeout(resolve,+10000))+//just+see+console+in+proper+way
++++console.log('\n\n###########+Testing+forOf+################+')
++++console.log('start+of+forOfTest+func')
++++let+a+=+[1,+2,+3]
++++for+(const+v+of+a)+{
++++++++console.log('start+of+forOf:+',+v)
++++++++await+new+Promise(resolve+=>+setTimeout(resolve,+v+*+1000))
++++++++console.log('end+of+forOf:+',+v)
++++}
++++console.log('end+of+forOfTest+func')
}
forOfTest()|code-block|syntax|javascript|782481|782482|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>These code snippet will give you better understanding of forEach and forOf comparison.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable no-console */
async function forEachTest() {
    console.log('########### Testing forEach ################ ')
    console.log('start of forEachTest func')
    let a = [1, 2, 3]
    await a.forEach(async (v) =&gt; {
        console.log('start of forEach: ', v)
        await new Promise(resolve =&gt; setTimeout(resolve, v * 1000))
        console.log('end of forEach: ', v)
    })
    console.log('end of forEachTest func')
}
forEachTest()


async function forOfTest() {
    await new Promise(resolve =&gt; setTimeout(resolve, 10000)) //just see console in proper way
    console.log('\n\n########### Testing forOf ################ ')
    console.log('start of forOfTest func')
    let a = [1, 2, 3]
    for (const v of a) {
        console.log('start of forOf: ', v)
        await new Promise(resolve =&gt; setTimeout(resolve, v * 1000))
        console.log('end of forOf: ', v)
    }
    console.log('end of forOfTest func')
}
forOfTest()</code></pre>
</div>
</div>
</p>


<p>I have a question regarding the native <code>Array.forEach</code> implementation of JavaScript: Does it behave asynchronously?
For example, if I call:</p>

<pre><code>[many many elements].forEach(function () {lots of work to do})
</code></pre>

<p>Will this be non-blocking?</p>


JavaScript, Node.js: is Array.forEach asynchronous?

关于JavaScript的原生Array.forEach实现，我有一个问题:它的行为是异步的吗？例如，如果我调用：[many many elements].forEach(function () {lots of work to do})这是否是非阻塞的？

问JavaScript，Node.js: Array.forEach是异步的吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript，Node.js: Array.forEach是异步的吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript，Node.js: Array.forEach是异步的吗？
EN