Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

Порядок выполнения и обработка ошибок

JavaScript поддерживает компактный набор инструкций, особенно управляющих инструкций, которые вы можете использовать, чтобы реализовать интерактивность в вашем приложении. В данной главе даётся обзор этих инструкций.

Более подробная информация об инструкциях, рассмотренных в данной главе, содержится всправочнике по JavaScript. Точка с запятой (;) используется для разделения инструкций в коде.

Любое выражение (expression) в JavaScript является также инструкцией (statement). Чтобы получить более подробную информацию о выражениях, прочитайтеВыражения и операторы.

Инструкция block

Инструкция block является фундаментальной и используется для группировки других инструкций. Блок ограничивается фигурными скобками:

{ statement_1; statement_2; ... statement_n; }

Блок обычно используется с управляющими инструкциями (например,if,for,while).

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

В вышеприведённом примере{ x++; } является блоком.

Обратите внимание: в JavaScriptотсутствует область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:

js
var x = 1;{  var x = 2;}console.log(x); // выведет 2

В вышеприведённом примере инструкцияvar x внутри блока находится в той же области видимости, что и инструкцияvar x перед блоком. В C или Java эквивалентный код выведет значение 1.

Начиная с ECMAScript 6, операторlet позволяет объявить переменную в области видимости блока. Чтобы получить более подробную информацию, прочитайтеlet.

Условные инструкции

Условная инструкция — это набор команд, которые выполняются, если указанное условие является истинным. JavaScript поддерживает две условные инструкции:if...else иswitch.

Инструкция if...else

Используйте операторif для выполнения инструкции, если логическое условия истинно. Используйте опциональныйelse, для выполнения инструкции, если условие ложно. Оператор if выглядит так:

js
if (condition) {  statement_1;} else {  statement_2;}

Здесьcondition может быть любым выражением, вычисляемым как истинное (true) или ложное (false). Чтобы получить более подробную информацию о значенияхtrue иfalse, прочитайтеBoolean. Если условие оценивается какtrue, то выполняетсяstatement_1, в противном случае -statement_2. Блокиstatement_1 иstatement_2 могут быть любыми блоками, включая также вложенные инструкцииif.

Также вы можете объединить несколько инструкций, пользуясьelse if для получения последовательности проверок условий:

if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}

В случае нескольких условий только первое логическое условие, которое вычислится истинным (true), будет выполнено. Используйте блок ({ ... }) для группировки нескольких инструкций. Применение блоков является хорошей практикой, особенно когда используются вложенные инструкцииif:

if (condition) {  statement_1_runs_if_condition_is_true;  statement_2_runs_if_condition_is_true;} else {  statement_3_runs_if_condition_is_false;  statement_4_runs_if_condition_is_false;}

Нежелательно использовать простые присваивания в условном выражении, т.к. присваивание может быть спутано с равенством при быстром просмотре кода. Например, не используйте следующий код:

js
if (x = y) {  /* ... */}

Если вам нужно использовать присваивание в условном выражении, то распространённой практикой является заключение операции присваивания в дополнительные скобки. Например:

js
if ((x = y)) {  /* ... */}

Ложные значения

Следующие значения являютсяложными:

  • false
  • undefined
  • null
  • 0
  • NaN
  • пустая строка ("" )

Все остальные значения, включая все объекты, будут восприняты как истина при передаче в условное выражение.

Не путайте примитивные логические значенияtrue иfalse со значениями true и false объектаBoolean. Например:

js
var b = new Boolean(false);if (b) // это условие trueif (b == true) // это условие false

В следующем примере функцияcheckData возвращаетtrue, если число символов в объектеText равно трём; в противном случае функция отображает окно alert и возвращаетfalse.

js
function checkData() {  if (document.form1.threeChar.value.length == 3) {    return true;  } else {    alert(      "Enter exactly three characters. " +        document.form1.threeChar.value +        " is not valid.",    );    return false;  }}

Инструкция switch

Инструкцияswitch позволяет сравнить значение выражения с различными вариантами и при совпадении выполнить соответствующий код. Инструкция имеет следующий вид:

switch (expression) {   case label_1:      statements_1      [break;]   case label_2:      statements_2      [break;]   ...   default:      statements_default      [break;]}

Сначала производится поиск ветвиcase с меткойlabel, совпадающей со значением выраженияexpression. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператораbreak, который прекращает выполнениеswitch и передаёт управление дальше. В противном случае управление передаётся необязательной ветвиdefault и выполняется соответствующий ей код. Если ветвьdefault не найдена, то программа продолжит выполняться со строчки, следующей за инструкциейswitch. По соглашению ветвьdefault является последней ветвью, но следовать этому соглашению необязательно.

Если операторbreak отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнётся выполнение кода, который следует за ней.

В следующем примере еслиfruittype имеет значение"Bananas", то будет выведено сообщение"Bananas are $0.48 a pound." и операторbreak прекратит выполнениеswitch. Если бы операторbreak отсутствовал, то был бы также выполнен код, соответствующий ветви"Cherries", т.е. выведено сообщение"Cherries are $3.00 a pound.".

js
switch (fruittype) {  case "Oranges":    console.log("Oranges are $0.59 a pound.");    break;  case "Apples":    console.log("Apples are $0.32 a pound.");    break;  case "Bananas":    console.log("Bananas are $0.48 a pound.");    break;  case "Cherries":    console.log("Cherries are $3.00 a pound.");    break;  case "Mangoes":    console.log("Mangoes are $0.56 a pound.");    break;  case "Papayas":    console.log("Mangoes and papayas are $2.79 a pound.");    break;  default:    console.log("Sorry, we are out of " + fruittype + ".");}console.log("Is there anything else you'd like?");

Инструкции обработки исключений

Инструкцияthrow используется, чтобы выбросить исключение, а инструкцияtry...catch, чтобы его обработать.

Типы исключений

Практически любой объект может быть выброшен как исключение. Тем не менее, не все выброшенные объекты создаются равными. Обычно числа или строки выбрасываются как исключения, но часто более эффективным является использование одного из типов исключений, специально созданных для этой цели:

Инструкция throw

Используйте инструкциюthrow, чтобы выбросить исключение. При выбросе исключения нужно указать выражение, содержащее значение, которое будет выброшено:

throw expression;

Вы можете выбросить любое выражение, а не только выражения определённого типа. В следующем примере выбрасываются исключения различных типов:

js
throw "Error2"; // stringthrow 42; // numberthrow true; // booleanthrow {  toString: function () {    return "I'm an object!";  },}; // object

Примечание:Вы можете выбросить объект как исключение. Вы можете обращаться к свойствам данного объекта в блокеcatch.

Примечание:В следующем примере объектUserException выбрасывается как исключение:

js
function UserException(message) {  this.message = message;  this.name = "UserException";}UserException.prototype.toString = function () {  return this.name + ': "' + this.message + '"';};throw new UserException("Value too high");

Инструкция try...catch

Инструкцияtry...catch состоит из блокаtry, который содержит одну или несколько инструкций, и блокcatch, которые содержит инструкции, определяющие порядок действий при выбросе исключения в блокеtry. Иными словами, если в блокеtry будет выброшено исключение, то управление будет передано в блокcatch. Если в блокеtry не возникнет исключений, то блокcatch будет пропущен. Блокfinally будет выполнен после окончания работы блоковtry иcatch, вне зависимости от того, было ли выброшено исключение.

В следующем примере вызывается функцияgetMonthName, которая возвращает название месяца по его номеру. Если месяца с указанным номером не существует, то функция выбросит исключение"InvalidMonthNo", которое будет перехвачено в блокеcatch:

js
function getMonthName(mo) {  mo = mo - 1; // Adjust month number for array index (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"; //throw keyword is used here  }}try {  // statements to try  monthName = getMonthName(myMonth); // function could throw exception} catch (e) {  monthName = "unknown";  logMyErrors(e); // pass exception object to error handler -> your own}

Блокcatch

Используйте блокcatch, чтобы обработать исключения, сгенерированные в блокеtry.

catch (catchID) { statements }

JavaScript создаёт идентификаторcatchID, которому присваивается перехваченное исключение, при входе в блокcatch; данный идентификатор доступен только в пределах блокаcatch и уничтожается при выходе из него.

В следующем примере выбрасывается исключение, которое перехватывается в блокеcatch:

js
try {  throw "myException";} catch (e) {  console.error(e);}

Блокfinally

Блокfinally содержит код, который будет выполнен после окончания работы блоковtry иcatch, но до того, как будет выполнен код, который следует за инструкциейtry...catch. Блокfinally выполняется вне зависимости от того, было ли выброшено исключение. Блокfinally выполняется даже в том случае, если исключение не перехватывается в блокеcatch.

В следующем примере открывается файл, затем в блокеtry происходит вызов функцииwriteMyFile, который может выбросить исключение. Если возникает исключение, то оно обрабатывается в блокеcatch. В любом случае файл будет закрыт функциейcloseMyFile, вызов которой находится в блокеfinally.

js
openMyFile();try {  writeMyFile(theData);} catch (e) {  handleError(e);} finally {  closeMyFile();}

Если блокfinally возвращает значение, то данное значение становится возвращаемым значением всей связкиtry-catch-finally. Значения, возвращаемые блокамиtry иcatch, будут проигнорированы.

js
function f() {  try {    console.log(0);    throw "bogus";  } catch (e) {    console.log(1);    return true; // приостанавливается до завершения блока `finally`    console.log(2); // не выполняется  } finally {    console.log(3);    return false; // заменяет предыдущий `return`    console.log(4); // не выполняется  }  // `return false` выполняется сейчас  console.log(5); // не выполняется}f(); // отображает 0, 1, 3 и возвращает `false`

Замена возвращаемых значений блокомfinally распространяется в том числе и на исключения, которые выбрасываются или перевыбрасываются в блокеcatch:

js
function f() {  try {    throw "bogus";  } catch (e) {    console.log('caught inner "bogus"');    throw e; // приостанавливается до завершения блока `finally`  } finally {    return false; // заменяет предыдущий `throw`  }  // `return false` выполняется сейчас}try {  f();} catch (e) {  // Не выполняется, т.к. `throw` в `catch `заменяется на `return` в `finally`  console.log('caught outer "bogus"');}// В результате отображается сообщение caught inner "bogus"// и возвращается значение `false`

Вложенные инструкцииtry...catch

Вы можете вкладывать инструкцииtry...catch друг в друга. Если внутренняя инструкцияtry...catch не имеет блокаcatch, то она должна иметь блок finally, кроме того исключение будет перехвачено во внешнем блокеcatch. Для получения большей информации ознакомьтесь с вложеннымиtry-блоками.

Использование объекта Error

В зависимости от типа ошибки вы можете использовать свойстваname иmessage, чтобы получить более подробную информацию. Свойствоname содержит название ошибки (например,DOMException илиError), свойствоmessage — описание ошибки.

Если вы выбрасываете собственные исключения, то чтобы получить преимущество, которое предоставляют эти свойства (например, если ваш блокcatch не делает различий между вашими исключениями и системными), используйте конструкторError. Например:

js
function doSomethingErrorProne() {  if (ourCodeMakesAMistake()) {    throw new Error("The message");  } else {    doSomethingToGetAJavascriptError();  }}try {  doSomethingErrorProne();} catch (e) {  console.log(e.name); // 'Error'  console.log(e.message); // 'The message' или JavaScript error message}

Объект Promise

Начиная с ECMAScript2015, JavaScript поддерживает объектPromise, который используется для отложенных и асинхронных операций.

ОбъектPromise может находиться в следующих состояниях:

  • ожидание (pending): начальное состояние, не выполнено и не отклонено.
  • выполнено (fulfilled): операция завершена успешно.
  • отклонено (rejected): операция завершена с ошибкой.
  • заданный (settled): промис выполнен или отклонен, но не находится в состоянии ожидания.

Загрузка изображения при помощи XHR

Простой пример использования объектовPromise иXMLHttpRequest для загрузки изображения доступен в репозитории MDNpromise-test на GitHub. Вы также можетепосмотреть его в действии. Каждый шаг прокомментирован, что позволяет вам разобраться в архитектуреPromise и XHR. Здесь приводится версия без комментариев:

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

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp