Jak zatrzymać pętlę JavaScript for?

128

Używam tego JavaScript do iteracji przez tablicę i znalezienia pasującego elementu tablicy:

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

Tablica zawiera te „rozmiary”: ["34", "36", "38"...].

remData.size to „rozmiar”, którego szukam (np. „36”).

Muszę zwrócić indeks, ijeśli rozmiar, którego szukam, znajduje się w indeksie. W przeciwnym razie muszę wrócić -1. Czy jest lepszy sposób na zrobienie tego?

częsty
źródło

Odpowiedzi:

194

Aby zatrzymać forpętlę na wczesnym etapie w JavaScript, użyj 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
     }
}

Jeśli pracujesz w środowisku ES2015 (aka ES6), w tym konkretnym przypadku użycia możesz użyć Array#findIndex(aby znaleźć indeks wpisu) lub Array#find(aby znaleźć sam wpis), z których oba mogą być podkładane / wypełniane:

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#findIndexzatrzymuje się za pierwszym razem, gdy wywołanie zwrotne zwraca prawdziwą wartość, zwracając indeks dla tego wywołania do funkcji zwrotnej; zwraca, -1jeśli wywołanie zwrotne nigdy nie zwróci prawdziwej wartości. Array#findzatrzymuje się również, gdy znajdzie to, czego szukasz, ale zwraca wpis, a nie indeks (lub undefinedjeśli wywołanie zwrotne nigdy nie zwraca prawdziwej wartości).

Jeśli używasz środowiska kompatybilnego z ES5 (lub podkładki ES5), możesz użyć nowej somefunkcji na tablicach, która wywołuje wywołanie zwrotne, dopóki nie zwróci prawdziwej wartości:

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

Jeśli używasz jQuery, możesz użyć jQuery.eachpętli przez tablicę; wyglądałoby to tak:

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
źródło
1
użycie instrukcji return jest dobrym podejściem. Dzięki @TJ Crowder
techloris_109
@TJ Crowder Które stwierdzenie jest dobrym podejściem: zwróć fałsz czy złamanie?
Ilyas karim
3
@Ilyaskarim: Używasz tego odpowiedniego dla konstrukcji, której używasz ( breakw forpętli, return falsein jQuery.each, return truein some, ...).
TJ Crowder
13

Zamiast tego użyj pętli for, która jest częścią wydania ES2015. W przeciwieństwie do forEach, możemy użyć funkcji return, break i continue. Zobacz 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
źródło
dobre wykorzystanie ES6, myślę, że jest to jeden z najlepszych odpowiedzi tutaj
Emad Salah
Rzeczywiście, powiedziałbym, że jest to NAJLEPSZA odpowiedź tutaj - o wiele bardziej zgrabny sposób na zrobienie tego ("najbardziej zwięzła, bezpośrednia składnia do przeglądania elementów tablicy", jak mówi Mozilla Hacks w linku w odpowiedzi). Powinniśmy odwdzięczyć się za całą ciężką pracę włożoną w ES6, korzystając z nowych funkcji, gdzie tylko możemy (i czerpać z tego korzyści).
Velojet
10

Logika jest nieprawidłowa. Zawsze zwracałby wynik ostatniego elementu tablicy.

remIndex = -1;

for (i = 0; i < remSize.length; i++) {      
    if (remSize[i].size == remData.size) {
        remIndex = i
        break;
    }
}
amit_g
źródło
0

Wiem, że to trochę stare, ale zamiast przechodzić przez tablicę z pętlą for, byłoby znacznie łatwiej użyć metody <array>.indexOf(<element>[, fromIndex])

Przechodzi przez tablicę, znajdując i zwracając pierwszy indeks wartości. Jeśli wartość nie jest zawarta w tablicy, zwraca -1.

<array>to tablica do przejrzenia, <element>wartość, której szukasz, i [fromIndex]indeks, od którego należy zacząć (domyślnie 0).

Mam nadzieję, że pomoże to zmniejszyć rozmiar twojego kodu!

JMoore2007
źródło
1
To nie jest odpowiedź na pytanie postawione w tytule: How to stop a JavaScript for loop?To nie odpowiedź Czy istnieje lepszy sposób na powrót indeksu meczu / -1 jeżeli żaden .
siwobrody