• Anterior
• Próxima

Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo doguia do JavaScript abordará diferentes formas de iterações existentes no JavaScript.

Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:

var passo;for (passo = 0; passo < 5; passo++) {  // Executa 5 vezes, com os valores de passos de 0 a 4.  console.log("Ande um passo para o leste");}

Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.

Os possíveis laços de repetição em #"#for_statement">for_statement

Declaração for

Um laçofor é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:

for ([expressaoInicial]; [condicao]; [incremento])  declaracao

Quando um for é executado, ocorre o seguinte:

1. A expressãoexpressao Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
2. A expressãocondicao é avaliada. caso o resultado decondicao seja verdadeiro, o laço é executado. Se o valor decondicao é falso, então o laço terminará. Se a expressãocondicao é omitida, acondicao é assumida como verdadeira.
3. A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
4. A atualização da expressãoincremento, se houver, executa, e retorna o controle para o passo 2.

Exemplo

A função a seguir contém uma declaraçãofor que contará o número de opções selecionadas em uma lista (um elemento<select> permite várias seleções). Dentro dofor é declarado uma váriaveli inicializada com zero. A declaraçãofor verifica sei é menor que o número de opções no elemento<select>, executa sucessivas declaraçãoif, e incrementai de um em um a cada passagem pelo laço.

<form name="selectForm">  <p>    <label for="tipoMusica"      >Escolha alguns tipos de música, em seguida, clique no botão      abaixo:</label    >    <select name="tipoMusica" multiple="multiple">      <option selected="selected">R&B</option>      <option>Jazz</option>      <option>Blues</option>      <option>New Age</option>      <option>Classico</option>      <option>Ópera</option>    </select>  </p>  <p><input type="button" value="Quantos foram selecionados?" /></p></form><script>  function howMany(selectObject) {    var numeroSelecionadas = 0;    for (var i = 0; i < selectObject.options.length; i++) {      if (selectObject.options[i].selected) {        numeroSelecionadas++;      }    }    return numeroSelecionadas;  }  var btn = document.getElementById("btn");  btn.addEventListener("click", function () {    alert(      "Total de opções selecionadas: " +        howMany(document.selectForm.tipoMusica),    );  });</script>

Declaração do...while

A instruçãodo...while repetirá até que a condição especificada seja falsa.

do  declaracaowhile (condicao);

A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso acondicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, acondicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte ado...while.

Exemplo

No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até quei seja menor que 5.

do {  i += 1;  console.log(i);} while (i < 5);

Declaração while

Uma declaraçãowhile executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaraçãowhile:

while (condicao)  declaracao

Se a condição se tornar falsa, a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.

O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.

Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.

Exemplo 1

Owhile a seguir executará enquanton for menor que três:

n = 0;x = 0;while (n < 3) {  n++;  x += n;}

A cada iteração, o laço incrementan e adiciona este valor parax. Portanto,x en recebem os seguintes valores:

• Depois de executar pela primeira vez:n = 1 ex = 1
• Depois da segunda vez:n = 2 ex = 3
• Depois da terceira vez:n = 3 ex = 6

Depois de executar pela terceira vez, a condiçãon < 3 não será mais verdadeira, então o laço encerrará.

Exemplo 2

Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:

while (true) {  console.log("Olá, mundo");}

Declaração label

Umlabel provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usarbreak oucontinue para indicar quando o programa deverá interromper o laço ou continuar sua execução.

Segue a sintaxe da instrução label:

label : declaracao

Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.

Exemplo

Neste exemplo, o labelmarkLoop idenfica um laçowhile.

markLoop: while (theMark == true) {  facaAlgo();}

Declaração break

Usebreak para terminar laços,switch, ou um conjunto que utiliza label.

• Quando você utilizabreak sem um label, ele encerrará imediatamente o laço mais internowhile,do-while,for, ouswitch e transferirá o controle para a próxima instrução.
• Quando você utilizabreak com um label, ele encerrará o label específico.

Segue a sintaxe do break:

1. break;
2. break label;

Na primeira opção será encerrado o laço de repetição mais interno ouswitch. Já na segunda opção será encerrada o bloco de código referente a label.

Exemplo1

O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido emtheValue:

for (i = 0; i < a.length; i++) {  if (a[i] == theValue) {    break;  }}

Exemplo 2: Utilizando break em label

var x = 0;var z = 0;labelCancelaLaco: while (true) {  console.log("Laço exterior: " + x);  x += 1;  z = 1;  while (true) {    console.log("Laço interior: " + z);    z += 1;    if (z === 10 && x === 10) {      break labelCancelaLaco;    } else if (z === 10) {      break;    }  }}

Declaração continue

A declaraçãocontinue pode ser usada para reiniciar uma instruçãowhile,do-while,for, oulabel.

• Quando você utilizacontinue sem uma label, ele encerrará a iteração atual mais interna de uma instruçãowhile,do-while, oufor e continuará a execução do laço a partir da próxima iteração. Ao contrário da instruçãobreak,continue não encerra a execução completa do laço. Em um laçowhile, ele voltará para a condição. Em um laçofor, ele pulará para a expressão de incrementação.
• Quando você utilizacontinue com uma label, ocontinue será aplicado ao laço identificado por esta label.

Segue a sintaxe docontinue:

1. continue;
2. continuelabel;

Exemplo 1

O exemplo a seguir mostra um laçowhile utilizandocontinue que executará quando o valor dei for igual a 3. Desta forma,n recebe os valores um, três, sete, e doze.

i = 0;n = 0;while (i < 5) {  i++;  if (i == 3) {    continue;  }  n += i;}

Exemplo 2

Uma instrução labelcheckiandj contém uma instrução labelcheckj. Se ocontinue for executado, o programa terminará a iteração atual decheckj e começará a próxima iteração. Toda vez que ocontinue for executado,checkj recomeçará até que a condição dowhile for falsa. Quando isto ocorrercheckiandj executará até que sua condição seja falsa.

Se ocontinue estivesse referenciandocheckiandj, o programa deveria continuar do topo decheckiandj.

checkiandj: while (i < 4) {  console.log(i);  i += 1;  checkj: while (j > 4) {    console.log(j);    j -= 1;    if (j % 2 == 0) {      continue checkj;    }    console.log(j + " é estranho.");  }  console.log("i = " + i);  console.log("j = " + j);}

Declaração for...in

A declaraçãofor...in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:

for (variavel in objeto) {  declaracoes}

Exemplo

A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.

function dump_props(obj, obj_name) {  var result = "";  for (var i in obj) {    result += obj_name + "." + i + " = " + obj[i] + "<br>";  }  result += "<hr>";  return result;}

Para um objeto chamadocar com propriedadesmake emodel, o resultado será:

car.make = Ford;car.model = Mustang;

Arrays

Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaraçãofor...in irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicionalfor com index numérico quando interagir com arrays, pois ofor...in interage com as propriedades definidas pelo programador ao invés dos elementos do array.

Declaraçãofor...of

A declaração for...of cria uma laço com objetos interativos ((incluindo,Array,Map,Set, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.

for (variavel of objeto) {  declaracoes}

O exemplo a seguir mostra a diferença entre ofor...of e ofor...in. Enquanto ofor...in interage com o nome das propriedades, ofor...of interage com o valor das propriedades.

let arr = [3, 5, 7];arr.foo = "hello";for (let i in arr) {  console.log(i); // logs "0", "1", "2", "foo"}for (let i of arr) {  console.log(i); // logs "3", "5", "7"}

• Anterior
• Próxima