Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

Controle de Fluxo e Manipulação de Erro

O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.

Veja aReferência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;) é utilizado para separar declarações.

Toda expressão também é uma declaração. VejaExpressões e Operadores para informações completas sobre expressões.

Declaração em bloco

Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:

{   declaracao_1;   declaracao_2;   .   .   .   declaracao_n;}

Exemplo

Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex.if,for,while).

js
while (x < 10) {  x++;}

Aqui,{ x++; } é a declaração de bloco.

Importante: Antes de ECMAScript 6 o JavaScriptnão possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:

js
var x = 1;{  var x = 2;}console.log(x); // exibe 2

Este código exibe 2 porque a declaraçãovar x dentro do bloco possui o mesmo escopo que a declaraçãovar x antes do bloco. Em C ou Java, o código equivalente exibiria 1.

Declarações condicionais

Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais:if...else eswitch.

Declaração if...else

Use a declaraçãoif para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcionalelse para executar alguma declaração caso a condição lógica for falsa. Uma declaraçãoif é declarada da seguinte maneira:

if (condicao) {  declaracao_1;} else {  declaracao_2;}

ondecondicao pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. VejaBoolean para uma explicação sobre o que é avaliado comotrue efalse. Secondicao for avaliada como verdadeira, declaracao_1 é executada; caso contrário,declaracao_2 é executada.declaracao_1 edeclaracao_2 podem ser qualquer declaração, incluindo declaraçõesif aninhadas.

Você pode também combinar declarações utilizandoelse if para obter várias condições testadas em sequência, como o seguinte:

if (condicao) {  declaracao_1;} else if (condicao_2) {  declaracao_2;} else if (condicao_n) {  declaracao_n;} else {  declaracao_final;}

Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declaraçõesif:

if (condicao) {    declaracao_1_executada_se_condicao_for_verdadeira;    declaracao_2_executada_se_condicao_for_verdadeira;} else {    declaracao_3_executada_se_condicao_for_falsa;    declaracao_4_executada_se_condicao_for_falsa;}

Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:

js
if (x = y) {  /* faça a coisa certa */}

Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:

js
if ((x = y)) {  /* faça a coisa certa */}

Valores avaliados como falsos

Os seguintes valores são avaliados como falsos:

  • false
  • undefined
  • null
  • 0
  • NaN
  • string vazia ("")

Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.

Não confunda os valores booleanos primitivostrue efalse com os valores detrue efalse do objetoBoolean. Por exemplo:

var b = new Boolean(false);if (b) // esta condição é avaliada como verdadeiraif (b == true) // esta condição é avaliada como falsa

Exemplo

No exemplo a seguir, a funçãoverifiqueDados retorna verdadeiro se o número de caracteres em um objetoText for três; caso contrário, exibe um alerta e retornafalso.

js
function verifiqueDados() {  if (document.form1.tresCaracteres.value.length == 3) {    return true;  } else {    alert(      "Informe exatamente três caracteres. " +        document.form1.tresCaracteres.value +        " não é válido.",    );    return false;  }}

Declaração switch

Uma declaraçãoswitch permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de umcase. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaraçãoswitch se parece com o seguinte:

switch (expressao) {   case rotulo_1:      declaracoes_1      [break;]   case rotulo_2:      declaracoes_2      [break;]   ...   default:      declaracoes_padrao      [break;]}

O programa primeiramente procura por uma cláusulacase com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcionaldefault e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusuladefault é encontrada, o programa continua a execução a partir da declaracao seguinte aoswitch. Por convenção, a cláusuladefault é a última, mas não é necessário que seja assim.

A instruçãobreak associada a cada cláusulacase, garante que o programa sairá doswitch assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte aoswitch. Se a declaraçãobreak for omitida, o programa continua a execução a partir da próxima declaração dentro doswitch.

Exemplo

No exemplo a seguir, setipofruta for avaliada como"Banana", o programa faz a correspondência do valor com case"Banana" e executa a declaração associada. Quando obreak é encontrado, o programa termina oswitch e executa a declaração seguinte ao condicional. Se obreak fosse omitido, a declaração de case"Cereja" também seria executada.

js
switch (tipofruta) {  case "Laranja":    console.log("O quilo da laranja está R$0,59.<br>");    break;  case "Maçã":    console.log("O quilo da maçã está R$0,32.<br>");    break;  case "Banana":    console.log("O quilo da banana está R$0,48.<br>");    break;  case "Cereja":    console.log("O quilo da cereja está R$3,00.<br>");    break;  case "Manga":    console.log("O quilo da manga está R$0,56.<br>");    break;  case "Mamão":    console.log("O quilo do mamão está R$2,23.<br>");    break;  default:    console.log("Desculpe, não temos " + tipofruta + ".<br>");}console.log("Gostaria de mais alguma coisa?<br>");

Declarações de Manipulação de Error

Você pode chamar uma exceção usando a declaraçãothrow e manipulá-la usando a declaraçãotry...catch.

Tipos de exceções

Praticamente pode-se utilizarthrow em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados porthrow são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usandothrow, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:

Declaração throw

Use a declaraçãothrow para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:

throw expressão;

Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:

js
throw "Error2"; // tipo stringthrow 42; // tipo numéricothrow true; // tipo booleanothrow {  toString: function () {    return "Eu sou um objeto!";  },};

**Nota:**Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch. O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.

js
// Cria um objeto do tipo UserExceptionfunction UserException(mensagem) {  this.mensagem = mensagem;  this.nome = "UserException";}// Realiza a conversão da exceção para uma string adequada quando usada como uma string.// (ex. pelo console de erro)UserException.prototype.toString = function () {  return this.name + ': "' + this.message + '"';};// Cria uma instância de um tipo de objeto e lança elathrow new UserException("Valor muito alto");

Declaração try...catch

A declaraçãotry...catch coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaraçãotry...catch pegá-a.

A declaraçãotry...catch é composta por um blocotry, que contém uma ou mais declarações, e zero ou mais blocoscatch, contendo declarações que especificam o que fazer se uma exceção é lançada no blocotry. Ou seja, você deseja que o blocotry tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o blococatch. Se qualquer declaração do blocotry (ou em uma função chamada dentro do blocotry) lança uma exceção, o controle é imediatamente mudado para o blococatch. Se nenhuma exceção é lançada no blocotry, o blococatch é ignorado. O blocofinally executa após os blocostry ecatch executarem, mas antes das declarações seguinte ao blocotry...catch.

O exemplo a seguir usa a declaraçãotry...catch. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo" e as declarações no blococatch define a váriavelmonthName paraunknown.

js
function getMonthName(mo) {  mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec)  var months = [    "Jan",    "Feb",    "Mar",    "Apr",    "May",    "Jun",    "Jul",    "Aug",    "Sep",    "Oct",    "Nov",    "Dec",  ];  if (months[mo]) {    return months[mo];  } else {    throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada.  }}try {  // statements to try  monthName = getMonthName(myMonth); // função poderia lançar uma exceção} catch (e) {  monthName = "unknown";  logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.}

O blococatch

Você pode usar um blococatch para lidar com todas as exceções que podem ser geradas no blocotry.

catch (catchID) {  declaracoes}

O blococatch específica um identificador (catchID na sintaxe anterior), que contém o valor especificado pela declaraçãothrow; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o blococatch é inserido; o identificador dura enquanto o blococatch está em execução, depois que termina a execução do blococatch, o identificador não estará mais disponível.

Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o blococatch.

js
try {  throw "myException"; // lança  uma exceção} catch (e) {  // declarações de lidar com as exceções  logMyErrors(e); // passar a exceção para o manipulador de erro}

O blocofinally

O blocofinally contém instruções para executar após os blocostry ecatch, mas antes das declarações seguinte a declaraçãotry...catch. O blocofinally é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no blocofinally executa, mesmo que nenhum blococatch processe a exceção.

Você pode usar blocofinally para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o blocofinally fecha o arquivo antes do script falhar.

js
openMyFile();try {  writeMyFile(theData); //Isso pode lançar um erro} catch (e) {  handleError(e); // Se temos um erro temos que lidar com ele} finally {  closeMyFile(); // Sempre feche o recurso}

Se o blocofinally retornar um valor, este valor se torna o valor de toda a entradatry-catch-finally, independente de quaisquer declarações de retorno nos blocostry ecatch:

js
function f() {  try {    console.log(0);    throw "bogus";  } catch (e) {    console.log(1);    return true; // essa declaração de retorno é suspensa    // até que o bloco finally seja concluído    console.log(2); // não executa  } finally {    console.log(3);    return false; // substitui o "return" anterior    console.log(4); // não executa  }  // "return false" é executado agora  console.log(5); // não executa}f(); // exibe 0, 1, 3; retorna false

Substituições de valores de retorno pelo blocofinally também se aplica a exceções lançadas ou re-lançadas dentro do blococatch:

js
function f() {  try {    throw "bogus";  } catch (e) {    console.log('captura interior "falso"');    throw e; // essa instrução throw é suspensa até    // que o bloco finally seja concluído  } finally {    return false; // substitui "throw" anterior  }  // "return false" é executado agora}try {  f();} catch (e) {  // isto nunca é executado porque o throw dentro  // do catch é substituído  // pelo return no finally  console.log('captura exterior "falso"');}// SAIDA// captura interior "falso"

Aninhando declarações try...catch

Você pode aninhar uma ou mais declaraçõestry...catch. Se uma declaraçãotry...catch interior não tem um blococatch, o delimitador do blocotry...catch da declaraçãocatch é verificado por uma correspondência.

Utilizando objetos deerro

Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.

Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:

js
function doSomethingErrorProne () {  if (ourCodeMakesAMistake()) {    throw (new Error('A mensagem'));  } else {    doSomethingToGetAJavascriptError();  }}....try {  doSomethingErrorProne();}catch (e) {  console.log(e.name); // exibe 'Error'  console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript}

Promises

Começando com ECMAScript 6, JavaScript ganha suporte para objetosPromise que lhe permite controlar o fluxo de operações diferídas e assíncronas.

Uma Promise assume um destes estados:

  • pending: estado inicial, nãofulfilled, ourejected.
  • fulfilled: operação bem sucedida.
  • rejected: operação falha.
  • settled: A Promise é fulfilled ou rejected, mas não pending.

Carregando uma imagem com XHR

Um exemplo simples usando Promise eXMLHttpRequest para carregar uma imagem disponível no repositório MDN GitHubpromise-test. Você também podevê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxoPromise para que você possa ter uma ideia:

js
function imgLoad(url) {  return new Promise(function (resolve, reject) {    var request = new XMLHttpRequest();    request.open("GET", url);    request.responseType = "blob";    request.onload = function () {      if (request.status === 200) {        resolve(request.response);      } else {        reject(          Error(            "Image didn't load successfully; error code:" + request.statusText,          ),        );      }    };    request.onerror = function () {      reject(Error("There was a network error."));    };    request.send();  });}

Para uma informação mais detalhada, consulte a página de referênciaPromise.

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp