Comment arrêter une boucle JavaScript for?

128

J'utilise ce JavaScript pour parcourir un tableau et trouver un élément de tableau correspondant:

var remSize = [], 
    szString, remData, remIndex, i;

for (i = 0; i < remSize.length; i++) {      
    // I'm looking for the index i, when the condition is true
    remSize[i].size == remData.size ? remIndex = i : remIndex = -1;     
}

Le tableau contient ces « tailles »: ["34", "36", "38"...].

remData.size est la "taille" que je recherche (par exemple "36").

Je dois renvoyer l'index isi la taille que je recherche est dans l'index. Sinon, je dois revenir -1. Y a-t-il une meilleure manière de faire cela?

fréquent
la source

Réponses:

194

Pour arrêter une forboucle tôt dans JavaScript, vous utilisez break:

var remSize = [], 
    szString,
    remData,
    remIndex,
    i;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // Set a default if we don't find it
for (i = 0; i < remSize.length; i++) {      
     // I'm looking for the index i, when the condition is true
     if (remSize[i].size === remData.size) {
          remIndex = i;
          break;       // <=== breaks out of the loop early
     }
}

Si vous êtes dans un environnement ES2015 (alias ES6), pour ce cas d'utilisation spécifique , vous pouvez utiliser Array#findIndex(pour trouver l'index de l'entrée) ou Array#find(pour trouver l'entrée elle-même), qui peuvent tous deux être shimmed / polyfilled:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = remSize.findIndex(function(entry) {
     return entry.size === remData.size;
});

Array#find:

var remSize = [], 
    szString,
    remData,
    remEntry;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remEntry = remSize.find(function(entry) {
     return entry.size === remData.size;
});

Array#findIndexs'arrête la première fois que le rappel renvoie une valeur de vérité, renvoyant l'index de cet appel au rappel; il retourne -1si le rappel ne renvoie jamais de valeur de vérité. Array#finds'arrête également quand il trouve ce que vous cherchez, mais il renvoie l'entrée, pas son index (ou undefinedsi le rappel ne renvoie jamais une valeur de vérité).

Si vous utilisez un environnement compatible ES5 (ou un shim ES5), vous pouvez utiliser la nouvelle somefonction sur les tableaux, qui appelle un rappel jusqu'à ce que le rappel renvoie une valeur de vérité:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
remSize.some(function(entry, index) {
    if (entry.size === remData.size) {
        remIndex = index;
        return true; // <== Equivalent of break for `Array#some`
    }
});

Si vous utilisez jQuery, vous pouvez utiliser jQuery.eachpour parcourir un tableau; cela ressemblerait à ceci:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
jQuery.each(remSize, function(index, entry) {
    if (entry.size === remData.size) {
        remIndex = index;
        return false; // <== Equivalent of break for jQuery.each
    }
});
TJ Crowder
la source
1
l'utilisation de l'instruction return est une bonne approche. Merci @TJ Crowder
techloris_109
@TJ Crowder quelle déclaration est une bonne approche: retourne false ou break?
Ilyas karim
3
@Ilyaskarim: Vous utilisez celui qui convient à la construction que vous utilisez ( breakdans une forboucle, return falsedans jQuery.each, return truedans some, ...).
TJ Crowder
13

Utilisez plutôt la boucle for of qui fait partie de la version ES2015. Contrairement à forEach, nous pouvons utiliser return, break et continuer. Voir https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/

let arr = [1,2,3,4,5];
for (let ele of arr) {
  if (ele > 3) break;
  console.log(ele);
}
Srini Karthikeyan
la source
bon usage d'es6, je pense que c'est l'une des meilleures réponses ici
Emad Salah
En effet, je dirais que c'est LA meilleure réponse ici - la manière la plus soignée de le faire («la syntaxe directe la plus concise à ce jour pour boucler les éléments d'un tableau», comme le dit Mozilla Hacks dans le lien de la réponse). Nous devrions rembourser tout le travail acharné qui a été consacré à ES6 en utilisant ses nouvelles fonctionnalités partout où nous le pouvons (et en tirer profit dans le processus).
Velojet
10

La logique est incorrecte. Il renverrait toujours le résultat du dernier élément du tableau.

remIndex = -1;

for (i = 0; i < remSize.length; i++) {      
    if (remSize[i].size == remData.size) {
        remIndex = i
        break;
    }
}
amit_g
la source
0

Je sais que c'est un peu vieux, mais au lieu de parcourir le tableau avec une boucle for, il serait beaucoup plus facile d'utiliser la méthode <array>.indexOf(<element>[, fromIndex])

Il parcourt un tableau, trouvant et renvoyant le premier index d'une valeur. Si la valeur n'est pas contenue dans le tableau, elle renvoie -1.

<array>est le tableau à parcourir, <element>est la valeur que vous recherchez et [fromIndex]est l'index à partir duquel commencer (par défaut à 0).

J'espère que cela vous aidera à réduire la taille de votre code!

JMoore2007
la source
1
Cela ne répond pas à la question du titre: How to stop a JavaScript for loop?Il ne réponse Y at - il une meilleure façon de retourner l'index d'un match / -1 si aucune .
greybeard