[1,2,3].forEach(function(el) {
    if(el === 1) break;
});

如何在JavaScript中使用新的forEach方法实现这一点?我尝试过返回;,return false;和断裂。break崩溃,return只会继续迭代。


当前回答

您可以创建forEach的变体,该变体允许break、continue、return甚至async/await:(用TypeScript编写的示例)

export type LoopControlOp = "break" | "continue" | ["return", any];
export type LoopFunc<T> = (value: T, index: number, array: T[])=>LoopControlOp;

Array.prototype.ForEach = function ForEach<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

// this variant lets you use async/await in the loop-func, with the loop "awaiting" for each entry
Array.prototype.ForEachAsync = async function ForEachAsync<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = await func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

用法:

function GetCoffee() {
    const cancelReason = peopleOnStreet.ForEach((person, index)=> {
        if (index == 0) return "continue";
        if (person.type == "friend") return "break";
        if (person.type == "boss") return ["return", "nevermind"];
    });
    if (cancelReason) console.log("Coffee canceled because: " + cancelReason);
}

其他回答

如果您想保持forEach语法,这是一种保持其高效的方法(尽管不如常规for循环好)。立即检查一个变量,该变量是否知道您是否想要脱离循环。

此示例使用匿名函数来围绕forEach创建函数范围,您需要存储已完成的信息。

(函数(){var element=document.getElementById('打印结果');var done=假;[1,2,3,4].forEach(功能(项目){如果(完成){return;}var text=document.createTextNode(项);element.appendChild(文本);如果(项==2){done=真;回来}});})();<div id=“printed result”></div>

我的两分钱。

这是一个for循环,但像forEach()一样在循环中维护对象引用,但可以中断。

var arr = [1,2,3];
for (var i = 0, el; el = arr[i]; i++) {
    if(el === 1) break;
}

您可以使用每种方法:

[1,2,3].every(function(el) {
    return !(el === 1);
});

ES6

[1,2,3].every( el => el !== 1 )

对于旧浏览器支持使用:

if (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

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

    return true;
  };
}

更多详情请点击此处。

为什么不尝试将函数包装在Promise中?

我提出这个问题的唯一原因是我在API中使用了一个函数,该函数的作用方式与forEach类似。我不希望它在找到值后继续迭代,我需要返回一些东西,所以我只需要解析Promise并以这种方式执行。

traverseTree(doc): Promise<any> {
  return new Promise<any>((resolve, reject) => {
    this.gridOptions.api.forEachNode((node, index) => {
    //the above function is the one I want to short circuit.
      if(node.data.id === doc.id) {
        return resolve(node);
      }
    });
  });
}

那么你所需要做的就是做一些事情,比如

this.traverseTree(doc).then((result) => {
   this.doSomething(result);
});

我上面的例子是在typescript中,只需忽略类型。逻辑应该有助于你“打破”你的循环。

引用Array.prototype.forEach()的MDN文档:

除此之外,无法停止或中断forEach()循环通过抛出异常。如果您需要这样的行为,.forEach()方法是错误的工具,请改用普通循环。如果要测试谓词的数组元素并需要布尔返回值,则可以改用every()或some()。

对于您的代码(在问题中),如@bobince所建议的,请改用Array.protocol.some()。它非常适合您的用例。

Array.pr原型.some()对数组中的每个元素执行一次回调函数,直到找到一个回调返回真值(当转换为布尔值时变为真)的元素。如果找到这样的元素,some()立即返回true。否则,some()返回false。回调仅对已赋值数组的索引调用;对于已删除或从未赋值的索引,不会调用它。