Como parar um JavaScript para loop?

127

Estou usando esse JavaScript para percorrer uma matriz e encontrar um elemento de matriz correspondente:

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

A matriz contém essas "tamanhos": ["34", "36", "38"...].

remData.size é o "tamanho" que estou procurando (por exemplo, "36").

Preciso retornar o índice ise o tamanho que estou procurando estiver no índice. Caso contrário, eu preciso retornar -1. Existe uma maneira melhor de fazer isso?

freqüente
fonte

Respostas:

193

Para interromper um forloop no início do JavaScript, use 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
     }
}

Se você estiver em um ambiente ES2015 (também conhecido como ES6), para este caso de uso específico , poderá usar Array#findIndex(para encontrar o índice da entrada) ou Array#find(para encontrar a própria entrada), os quais podem ser 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#findIndexpara na primeira vez em que o retorno de chamada retorna um valor verdadeiro, retornando o índice dessa chamada para o retorno de chamada; retorna -1se o retorno de chamada nunca retornar um valor verdadeiro. Array#findtambém para quando encontra o que você está procurando, mas retorna a entrada, não o índice (ou undefinedse o retorno de chamada nunca retornar um valor verdadeiro).

Se você estiver usando um ambiente compatível com ES5 (ou um shim ES5), poderá usar a nova somefunção em matrizes, que chama um retorno de chamada até que o retorno retorne um valor verdadeiro:

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

Se você estiver usando jQuery, poderá usar um jQuery.eachloop através de uma matriz; que ficaria assim:

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
fonte
1
usar a declaração de retorno é uma boa abordagem. Obrigado @TJ Crowder
techloris_109
@TJ Crowder, que afirmação é uma boa abordagem: retornar falso ou quebrar?
Ilyas karim
3
@Ilyaskarim: Você usa o apropriado para a construção que está usando ( breakem um forloop, return falseem jQuery.each, return trueem some, ...).
TJ Crowder 4/17
13

Use o loop for do que faz parte da versão ES2015. Ao contrário do forEach, podemos usar return, break e continue. Consulte 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
fonte
bom uso de ES6, penso que esta é uma das melhores respostas aqui
Emad Salah
De fato, eu diria que é a melhor resposta aqui - muito a maneira mais clara de fazê-lo ("a sintaxe mais concisa e direta ainda para fazer um loop através dos elementos da matriz", como Mozilla Hacks diz no link da resposta). Devemos retribuir todo o trabalho árduo realizado no ES6, usando seus novos recursos sempre que possível (e nos beneficiando no processo).
Velojet 6/09/17
10

A lógica está incorreta. Sempre retornaria o resultado do último elemento na matriz.

remIndex = -1;

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

Eu sei que isso é um pouco antigo, mas em vez de fazer um loop pela matriz com um loop for, seria muito mais fácil usar o método <array>.indexOf(<element>[, fromIndex])

Ele percorre uma matriz, encontrando e retornando o primeiro índice de um valor. Se o valor não estiver contido na matriz, ele retornará -1.

<array>é a matriz a ser examinada, <element>é o valor que você está procurando e [fromIndex]é o índice para iniciar (o padrão é 0).

Espero que isso ajude a reduzir o tamanho do seu código!

JMoore2007
fonte
1
Isso não responde à pergunta do título: How to stop a JavaScript for loop?Ele faz resposta Existe uma maneira melhor para retornar o índice de um jogo / -1 se nenhum .
greybeard