这些代码片段将使您更好地理解forEach和forOf的比较。

/* 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()

甚至可以像这样编码解决方案，例如:

 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+1, data, errors, callback);
        //});
    } else {
       return callback(data);
    }
};

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

另一方面，它比“for”慢得多。

否则，优秀的Async库可以这样做:https://caolan.github.io/async/docs.html#each

编辑2018-10-11: 看起来下面描述的标准很有可能无法通过，可以考虑管道作为替代方案(虽然行为不完全相同，但方法可以在类似的庄园中实现)。

这就是为什么我对es7感到兴奋，在未来你将能够做一些像下面的代码(一些规格不完整，所以使用时要小心，我会尽量保持最新)。但是基本上使用新的::bind操作符，你将能够在对象上运行一个方法，就好像对象的原型包含了这个方法一样。例如[Object]::[Method]，通常你会调用[Object].[ObjectsMethod]

注意今天(7月24日-16日)要做到这一点，并让它在所有浏览器中都能工作，你需要编译以下功能的代码:导入/导出，箭头函数，承诺，Async / Await，以及最重要的函数绑定。如果必要，下面的代码可以修改为只使用函数绑定，所有这些功能今天都可以使用babel。

YourCode.js(其中“许多工作要做”必须简单地返回一个承诺，在异步工作完成时解决它。)

import { asyncForEach } from './ArrayExtensions.js';

await [many many elements]::asyncForEach(() => lots of work to do);

ArrayExtensions.js

export function asyncForEach(callback)
{
    return Promise.resolve(this).then(async (ar) =>
    {
        for(let i=0;i<ar.length;i++)
        {
            await callback.call(ar, ar[i], i, ar);
        }
    });
};

export function asyncMap(callback)
{
    return Promise.resolve(this).then(async (ar) =>
    {
        const out = [];
        for(let i=0;i<ar.length;i++)
        {
            out[i] = await callback.call(ar, ar[i], i, ar);
        }
        return out;
    });
};

这些代码片段将使您更好地理解forEach和forOf的比较。

/* 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()

这是一个不需要第三方库就可以使用的简短异步函数

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

不，它堵塞了。看一下算法的说明。

然而，MDN上给出了一个可能更容易理解的实现:

if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp */)
  {
    "use strict";

    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
        fun.call(thisp, t[i], i, t);
    }
  };
}

如果你必须为每个元素执行大量代码，你应该考虑使用不同的方法:

function processArray(items, process) {
    var todo = items.concat();

    setTimeout(function() {
        process(todo.shift());
        if(todo.length > 0) {
            setTimeout(arguments.callee, 25);
        }
    }, 25);
}

然后用:

processArray([many many elements], function () {lots of work to do});

这将是非阻塞的。这个例子来自于高性能JavaScript。

另一个选择可能是网络工作者。