Maison > interface Web > js tutoriel > À quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détaillée

À quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détaillée

青灯夜游
Libérer: 2018-11-08 18:01:23
original
7532 Les gens l'ont consulté

Le contenu de cet article concerne la structure syntaxique js try...catch. À quoi ça sert ? Explication détaillée de try...catch. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. La syntaxe de base de try...catch

La structure try..catch comporte principalement deux blocs : try { } et catch(err){} :

try{
   //在这里运行代码
   //抛出错误
}
catch(err){
   //在这里处理错误
}
Copier après la connexion

Le principe de fonctionnement est le suivant :

1. Tout d'abord, exécutez le code try {. ...}.

2. S'il n'y a pas d'erreur, ignorez catch(err){....} Après avoir exécuté try {...}, ignorez catch(err){....} et exécutez directement. Déclaration suivante.

3. Si une erreur se produit, try arrête l'exécution et commence à exécuter catch(err){...}. La variable err (qui peut être définie arbitrairement) contient un objet d'erreur détaillant ce qui s'est passé.

2. Objet d'erreur

Lorsqu'une erreur se produit, JavaScript génère un objet contenant des informations détaillées à son sujet. Cet objet est ensuite passé à catch en paramètre, par exemple :

try {
  // ...
} catch(err) { // <-- "错误对象",“err”可以用可以用任意词代替
  // ...
}
Copier après la connexion

Pour toutes les erreurs intégrées, l'objet d'erreur à l'intérieur du bloc catch a deux propriétés principales :

name

Mauvais nom, "erreur de référence" pour une variable non définie.

message

Message texte avec les détails de l'erreur.

Il existe d'autres propriétés non standard dans la plupart des environnements. Le plus largement utilisé et pris en charge est :

stack

Pile d'appels actuelle : une chaîne contenant des informations sur la séquence d'appels imbriquée qui a provoqué l'erreur (le but est de débogage).

Par exemple :

try {
  lalala; // 错误,变量未定义!
} catch(err) {
  alert(err.name); // 引用错误
  alert(err.message); // Lalala变量没有定义
  alert(err.stack); //引用错误:Lalala变量没有定义在…
  
  // 也可以作为整体显示错误
  // “name: message”:可以将错误转换为字符串
  alert(err); // ReferenceError: lalala is not defined
}
Copier après la connexion

3. Utilisez "essayer... attraper"

Explorons un réel cas d'utilisation try..catch.

Code html :

<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="mess"></p>
Copier après la connexion

Code js :

function myFunction() {
	try {
		var x = document.getElementById("demo").value;
		//取元素的值

		if(x == "") throw "值为空";
		//根据获取的值, 抛出错误
		if(isNaN(x)) throw "不是数字";
		if(x > 10) throw "太大";
		if(x < 5) throw "太小";
	} catch(err) {
		var y = document.getElementById("mess");
		//抓住上面throw抛出的错误, 给p标签显示
		y.innerHTML = "错误:" + err + "。";
	}
}
Copier après la connexion

Rendu après opération :

À quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détailléeÀ quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détaillée

4. try...catch...finally

La construction try...catch a également une clause de code : enfin.

S'il existe, il s'exécutera dans tous les cas :

Après essai, s'il n'y a pas d'erreur,

2. Après cela, s'il y a une erreur

La syntaxe étendue ressemble à ceci :

try {
   ... 尝试执行代码 ...
} catch(e) {
   ... 处理错误 ...
} finally {
   ... 始终执行 ...
}
Copier après la connexion

Essayez d'exécuter ce code :

try {
  alert( &#39;try&#39; );
  if (confirm(&#39;犯错误了?&#39;)) BAD_CODE();
} catch (e) {
  alert( &#39;catch&#39; );
} finally {
  alert( &#39;finally&#39; );
}
Copier après la connexion

Il existe deux types de méthodes d'exécution de code :

Si vous répondez « Oui (OK) » à « Vous avez fait une erreur ? », puis exécutez enfin try -> catch ->

Si vous dites "non (annuler)", essayez enfin ->

indique enfin que nous devons utiliser cette clause lorsque nous commençons à faire quelque chose avant try..catch et que nous voulons le terminer sans aucun résultat.

Par exemple, nous voulons mesurer le temps pris par la fonction numérique de Fibonacci fib(n). Bien entendu, nous pouvons démarrer la mesure avant de l’exécuter et la terminer ensuite. Mais que se passe-t-il si une erreur survient lors de l’appel de la fonction ? En particulier, l'implémentation de fib(n) dans le code ci-dessous renvoie une erreur pour un nombre négatif ou non entier.

Enfin quoi qu'il arrive, cette clause est un bon endroit pour prendre vos mesures.

Voici enfin la garantie que le temps sera mesuré correctement dans les deux cas - si fib est exécuté avec succès et qu'une erreur se produit :

let num = +prompt("输入正整数?", 35)

let diff, result;

function fib(n) {
	if(n < 0 || Math.trunc(n) != n) {
		throw new Error("不能是负的,且必须是整数。");
	}
	return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

let start = Date.now();

try {
	result = fib(num);
} catch(e) {
	result = 0;
} finally {
	diff = Date.now() - start;
}

alert(result || "发生错误");

alert(`执行时间 ${diff}ms`);
Copier après la connexion

Lorsque nous entrons 35 :

À quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détailléeÀ quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détailléeÀ quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détaillée

Quand on entre -1 :

À quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détailléeÀ quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détailléeÀ quoi sert la structure syntaxique js try...catch ? essayez... obtenez une explication détaillée

Les deux mesures sont correctes Terminer .

Résumé : ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Des didacticiels vidéo associés sont recommandés : Tutoriel JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal