Court-circuit Array.forEach comme appelant pause

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

Comment puis-je faire cela en utilisant la nouvelle forEachméthode en JavaScript? J'ai essayé return;, return false;et break. breakse bloque et returnne fait que poursuivre l'itération.

Il n'y a pas intégré dans la capacité à breaken forEach. Pour interrompre l'exécution, vous devez lever une exception quelconque. par exemple.

var BreakException = {};

try {
  [1, 2, 3].forEach(function(el) {
    console.log(el);
    if (el === 2) throw BreakException;
  });
} catch (e) {
  if (e !== BreakException) throw e;
}

Les exceptions JavaScript ne sont pas terriblement jolies. Une forboucle traditionnelle pourrait être plus appropriée si vous en avez vraiment besoin break.

Utilisation Array#some

Utilisez plutôt Array#some:

[1, 2, 3].some(function(el) {
  console.log(el);
  return el === 2;
});

Cela fonctionne car someretourne truedès que l'un des rappels, exécuté dans l'ordre du tableau, retourne true, court-circuite l'exécution du reste.

some, son inverse every(qui s'arrêtera sur a return false), et forEachsont toutes des méthodes ECMAScript Fifth Edition qui devront être ajoutées aux Array.prototypenavigateurs sur lesquels elles sont manquantes.

Il y a maintenant un meilleur moyen de le faire dans ECMAScript2015 (aka ES6) en utilisant la nouvelle boucle for of . Par exemple, ce code n'imprime pas les éléments du tableau après le chiffre 5:

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let el of arr) {
  console.log(el);
  if (el === 5) {
    break;
  }
}

De la documentation:

Tant pour ... dans que pour ... des déclarations itérer sur quelque chose. La principale différence entre eux réside dans ce qu'ils parcourent. L' instruction for ... in parcourt les propriétés énumérables d'un objet, dans l'ordre d'insertion d'origine. L' instruction for ... of parcourt les données que l'objet itérable définit pour être itérées.

Besoin de l'index dans l'itération? Vous pouvez utiliser Array.entries():

for (const [index, el] of arr.entries()) {
  if ( index === 5 ) break;
}

Vous pouvez utiliser toutes les méthodes:

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

ES6

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

pour l'ancienne prise en charge du navigateur, utilisez:

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;
  };
}

plus de détails ici .

Citant la documentation MDN deArray.prototype.forEach() :

Il n'y a aucun moyen d'arrêter ou de rompre une forEach()boucle autrement qu'en lançant une exception. Si vous avez besoin d'un tel comportement, la .forEach()méthode n'est pas le bon outil , utilisez plutôt une boucle simple. Si vous testez les éléments du tableau pour un prédicat et avez besoin d'une valeur de retour booléenne, vous pouvez utiliser every()ou à la some()place.

Pour votre code (dans la question), comme suggéré par @bobince, utilisez Array.prototype.some()plutôt. Il convient très bien à votre cas d'utilisation.

Array.prototype.some()exécute la fonction de rappel une fois pour chaque élément présent dans le tableau jusqu'à ce qu'il en trouve un où le rappel renvoie une valeur véridique (une valeur qui devient vraie lorsqu'elle est convertie en a Boolean). Si un tel élément est trouvé, some()renvoie immédiatement true. Sinon, some()renvoie false. le rappel n'est invoqué que pour les index du tableau auxquels des valeurs ont été attribuées; elle n'est pas invoquée pour les index qui ont été supprimés ou auxquels aucune valeur n'a été affectée.

Malheureusement, dans ce cas, ce sera beaucoup mieux si vous ne l'utilisez pas forEach. Utilisez plutôt une forboucle régulière et cela fonctionnera maintenant exactement comme vous vous y attendez.

var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
  if (array[i] === 1){
    break;
  }
}

Pensez à utiliser jqueryla eachméthode de, car elle permet de retourner une fonction de rappel false à l'intérieur:

$.each(function(e, i) { 
   if (i % 2) return false;
   console.log(e)
})

Les bibliothèques Lodash fournissent également une takeWhileméthode qui peut être chaînée avec map / réduire / plier, etc.:

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.takeWhile(users, function(o) { return !o.active; });
// => objects for ['barney', 'fred']

// The `_.matches` iteratee shorthand.
_.takeWhile(users, { 'user': 'barney', 'active': false });
// => objects for ['barney']

// The `_.matchesProperty` iteratee shorthand.
_.takeWhile(users, ['active', false]);
// => objects for ['barney', 'fred']

// The `_.property` iteratee shorthand.
_.takeWhile(users, 'active');
// => []

D'après votre exemple de code, il ressemble à Array.prototype.findce que vous recherchez: Array.prototype.find () et Array.prototype.findIndex ()

[1, 2, 3].find(function(el) {
    return el === 2;
}); // returns 2

Si vous souhaitez utiliser la suggestion de Dean Edward et lancer l'erreur StopIteration pour sortir de la boucle sans avoir à attraper l'erreur, vous pouvez utiliser la fonction suivante (à l' origine d'ici ):

// Use a closure to prevent the global namespace from be polluted.
(function() {
  // Define StopIteration as part of the global scope if it
  // isn't already defined.
  if(typeof StopIteration == "undefined") {
    StopIteration = new Error("StopIteration");
  }

  // The original version of Array.prototype.forEach.
  var oldForEach = Array.prototype.forEach;

  // If forEach actually exists, define forEach so you can
  // break out of it by throwing StopIteration.  Allow
  // other errors will be thrown as normal.
  if(oldForEach) {
    Array.prototype.forEach = function() {
      try {
        oldForEach.apply(this, [].slice.call(arguments, 0));
      }
      catch(e) {
        if(e !== StopIteration) {
          throw e;
        }
      }
    };
  }
})();

Le code ci-dessus vous donnera la possibilité d'exécuter du code tel que le suivant sans avoir à faire vos propres clauses try-catch:

// Show the contents until you get to "2".
[0,1,2,3,4].forEach(function(val) {
  if(val == 2)
    throw StopIteration;
  alert(val);
});

Une chose importante à retenir est que cela ne mettra à jour la fonction Array.prototype.forEach que si elle existe déjà. S'il n'existe pas déjà, il ne le modifiera pas.

Réponse courte: utilisez for...breakpour cela ou changez votre code pour éviter de le casser forEach. N'utilisez pas .some()ou .every()pour émuler for...break. Réécrivez votre code pour éviter la for...breakboucle, ou utilisez for...break. Chaque fois que vous utilisez ces méthodes comme for...breakalternative, Dieu tue le chaton.

Longue réponse:

.some()et les .every()deux retournent une booleanvaleur, .some()retourne trues'il y a un élément pour lequel la fonction passée retourne true, chaque retourne falses'il y a un élément pour lequel la fonction passée retourne false. C'est ce que cela signifie. Utiliser des fonctions pour ce qu'elles ne signifient pas est bien pire que d'utiliser des tableaux pour la mise en page au lieu de CSS, car cela frustre tous ceux qui lisent votre code.

De plus, la seule façon possible d'utiliser ces méthodes comme for...breakalternative est de créer des effets secondaires (changer certains vars en dehors de la .some()fonction de rappel), et ce n'est pas très différent de for...break.

Donc, utiliser .some()ou .every()comme for...breakalternative à la boucle n'est pas exempt d'effets secondaires, ce n'est pas beaucoup plus propre alors for...break, c'est frustrant, donc ce n'est pas mieux.

Vous pouvez toujours réécrire votre code pour qu'il n'y ait pas besoin de le faire for...break. Vous pouvez filtrer le tableau à l'aide .filter(), vous pouvez diviser le tableau à l'aide de .slice()et ainsi de suite, puis utiliser .forEach()ou .map()pour cette partie du tableau.

C'est juste quelque chose que j'ai trouvé pour résoudre le problème ... Je suis presque sûr que cela résout le problème que le demandeur d'origine avait:

Array.prototype.each = function(callback){
    if(!callback) return false;
    for(var i=0; i<this.length; i++){
        if(callback(this[i], i) == false) break;
    }
};

Et puis vous l'appeleriez en utilisant:

var myarray = [1,2,3];
myarray.each(function(item, index){
    // do something with the item
    // if(item != somecondition) return false; 
});

Renvoyer false à l'intérieur de la fonction de rappel provoquera une interruption. Faites-moi savoir si cela ne fonctionne pas vraiment.

Un autre concept que j'ai trouvé:

function forEach(array, cb) {
  var shouldBreak;
  function _break() { shouldBreak = true; }
  for (var i = 0, bound = array.length; i < bound; ++i) {
    if (shouldBreak) { break; }
    cb(array[i], i, array, _break);
  }
}

// Usage

forEach(['a','b','c','d','e','f'], function (char, i, array, _break) {
  console.log(i, char);
  if (i === 2) { _break(); }
});

var array = [1,2,3,4];

for(var item of array){
    console.log(item);
    if(item == 2){
       break;
    }
}

Trouvé cette solution sur un autre site. Vous pouvez envelopper forEach dans un scénario try / catch.

if(typeof StopIteration == "undefined") {
 StopIteration = new Error("StopIteration");
}

try {
  [1,2,3].forEach(function(el){
    alert(el);
    if(el === 1) throw StopIteration;
  });
} catch(error) { if(error != StopIteration) throw error; }

Plus de détails ici: http://dean.edwards.name/weblog/2006/07/enum/

Si vous n'avez pas besoin d'accéder à votre tableau après l'itération, vous pouvez renflouer en définissant la longueur du tableau sur 0. Si vous en avez toujours besoin après votre itération, vous pouvez le cloner à l'aide de la tranche ..

[1,3,4,5,6,7,8,244,3,5,2].forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Ou avec un clone:

var x = [1,3,4,5,6,7,8,244,3,5,2];

x.slice().forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Ce qui est une bien meilleure solution que de lancer des erreurs aléatoires dans votre code.

Il s'agit d'une boucle for, mais conserve la référence d'objet dans la boucle comme une forEach () mais vous pouvez vous séparer.

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

Comme mentionné précédemment, vous ne pouvez pas casser .forEach().

Voici une façon légèrement plus moderne de faire un foreach avec les itérateurs ES6. Vous permet d'accéder directement à index/ valuelors de l'itération.

const array = ['one', 'two', 'three'];

for (const [index, val] of array.entries()) {
  console.log('item:', { index, val });
  if (index === 1) {
    console.log('break!');
    break;
  }
}

Production:

item: { index: 0, val: 'one' }
item: { index: 1, val: 'two' }
break!

Liens

• Array.prototype.entries()
• Itérateurs et générateurs
• Mission de restructuration

Encore une autre approche

        var wageType = types.filter(function(element){
            if(e.params.data.text == element.name){ 
                return element;
            }
        });
        console.dir(wageType);

J'utilise nullhack à cet effet, il essaie d'accéder à la propriété de null, ce qui est une erreur:

try {
  [1,2,3,4,5]
  .forEach(
    function ( val, idx, arr ) {
      if ( val == 3 ) null.NULLBREAK;
    }
  );
} catch (e) {
  // e <=> TypeError: null has no properties
}
//

Si vous voulez conserver votre forEachsyntaxe, c'est un moyen de la garder efficace (bien que pas aussi bonne qu'une boucle for régulière). Recherchez immédiatement une variable qui sait si vous voulez sortir de la boucle.

Cet exemple utilise une fonction anonyme pour créer une étendue de fonction autour de forEachlaquelle vous devez stocker les informations effectuées .

(function(){
    var element = document.getElementById('printed-result');
    var done = false;
    [1,2,3,4].forEach(function(item){
        if(done){ return; }
        var text = document.createTextNode(item);
        element.appendChild(text);
        if (item === 2){
          done = true;
          return;
        }
    });
})();

<div id="printed-result"></div>

Mes deux centimes.

Je ne le sais pas correctement. Il ne s'agit pas de rompre la boucle. C'est un Jugad

let result = true;
[1, 2, 3].forEach(function(el) {
    if(result){
      console.log(el);
      if (el === 2){
        result = false;
      }
    }
});

Utilisez la array.prototype.everyfonction, qui vous fournit l'utilitaire pour rompre le bouclage. Voir l'exemple ici la documentation Javascript sur le réseau de développeurs Mozilla

D'accord avec @bobince, voté positivement.

Aussi, pour info:

Prototype.js a quelque chose à cet effet:

<script type="text/javascript">
  $$('a').each(function(el, idx) {
    if ( /* break condition */ ) throw $break;
    // do something
  });
</script>

$break sera intercepté et géré par Prototype.js en interne, interrompant le cycle "each" mais ne générant pas d'erreurs externes.

Voir API Prototype.JS pour plus de détails.

jQuery a également un moyen, il suffit de retourner false dans le gestionnaire pour rompre la boucle tôt:

<script type="text/javascript">
  jQuery('a').each( function(idx) {
    if ( /* break condition */ ) return false;
    // do something

  });
</script>

Voir API jQuery pour plus de détails.

Ce n'est pas le plus efficace, car vous faites toujours le cycle de tous les éléments, mais j'ai pensé qu'il pourrait être utile de considérer le très simple:

let keepGoing = true;
things.forEach( (thing) => {
  if (noMore) keepGoing = false;
  if (keepGoing) {
     // do things with thing
  }
});

vous pouvez suivre le code ci-dessous qui fonctionne pour moi:

 var     loopStop = false;
YOUR_ARRAY.forEach(function loop(){
    if(loopStop){ return; }
    if(condition){ loopStop = true; }
});

Je préfère utiliser for in

var words = ['a', 'b', 'c'];
var text = '';
for (x in words) {
    if (words[x] == 'b') continue;
    text += words[x];
}
console.log(text);

for infonctionne un peu comme forEach, et vous pouvez ajouter la fonction return to exit à l'intérieur. De meilleures performances aussi.

Si vous avez besoin de rompre en fonction de la valeur des éléments qui sont déjà dans votre tableau comme dans votre cas (c.-à-d. Si la condition de rupture ne dépend pas de la variable d'exécution qui peut changer après que le tableau se soit vu attribuer ses valeurs d'élément), vous pouvez également utiliser une combinaison de slice () et indexOf () comme suit.

Si vous avez besoin de vous interrompre lorsque forEach atteint «Apple», vous pouvez utiliser

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var fruitsToLoop = fruits.slice(0, fruits.indexOf("Apple"));
// fruitsToLoop = Banana,Orange,Lemon

fruitsToLoop.forEach(function(el) {
    // no need to break
});

Comme indiqué dans W3Schools.com la méthode slice () renvoie les éléments sélectionnés dans un tableau, en tant que nouvel objet tableau. Le tableau d'origine ne sera pas modifié.

Voir en JSFiddle

J'espère que cela aide quelqu'un.

Vous pouvez créer une variante de forEachqui permet break, continue, returnet même async/ await: (exemple écrit dactylographié)

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];
    }
};

Usage:

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);
}

essayez avec "find":

var myCategories = [
 {category: "start", name: "Start", color: "#AC193D"},
 {category: "action", name: "Action", color: "#8C0095"},
 {category: "exit", name: "Exit", color: "#008A00"}
];

function findCategory(category) {
  return myCategories.find(function(element) {
    return element.category === category;
  });
}

console.log(findCategory("start"));
// output: { category: "start", name: "Start", color: "#AC193D" }

Oui, il est possible de continuer et de sortir d'une boucle forEach.

Pour continuer, vous pouvez utiliser return, la boucle continuera mais la fonction actuelle se terminera.

Pour quitter la boucle, vous pouvez définir le troisième paramètre sur une longueur de 0, définie sur un tableau vide. La boucle ne continuera pas, la fonction actuelle le fait, vous pouvez donc utiliser "return" pour terminer, comme exit dans une boucle for normale ...

Cette:

[1,2,3,4,5,6,7,8,9,10].forEach((a,b,c) => {
    console.log(a);
    if(b == 2){return;}
    if(b == 4){c.length = 0;return;}
    console.log("next...",b);
});

imprimera ceci:

1
next... 0
2
next... 1
3
4
next... 3
5

Avant, mon code est ci-dessous

 this.state.itemsDataSource.forEach((item: any) => {
                if (!item.isByPass && (item.invoiceDate == null || item.invoiceNumber == 0)) {

                    return false;
                }
            });

J'ai changé en dessous, il a été corrigé.

 for (var i = 0; i < this.state.itemsDataSource.length; i++) {
                var item = this.state.itemsDataSource[i];
                if (!item.isByPass && (item.invoiceDate == null || item.invoiceNumber == 0)) {

                    return false;
                }
            }