Malentendus liés à l'utilisation de JavaScript


Dans ce chapitre, nous discuterons des malentendus dans l'utilisation de JavaScript.

Erreur d'application de l'opérateur d'affectation

Dans les programmes JavaScript, si vous utilisez le signe égal (=) de l'opérateur d'affectation dans une instruction conditionnelle if, un résultat incorrect sera produit, corrigez La méthode consiste à utiliser deux signes égaux de l'opérateur de comparaison (==).

if L'instruction conditionnelle renvoie false (ce à quoi nous nous attendions) car x n'est pas égal à 10 :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

si L'instruction conditionnelle renvoie true (pas ce à quoi nous nous attendions) car l'instruction conditionnelle est exécutée et x se voit attribuer une valeur de 10, 10 est vrai :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

si L'instruction conditionnelle renvoie false (pas ce à quoi nous nous attendions) Parce que l'instruction conditionnelle est exécutée, x se voit attribuer la valeur 0 et 0 est faux :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Note赋值语句返回变量的值。

Erreurs courantes des opérateurs de comparaison

Dans les comparaisons régulières, le type de données est ignoré. L'instruction conditionnelle suivante renvoie vrai :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>
<. 🎜>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Dans les opérations de comparaison strictes, === est un calculateur d'identité, tout en vérifiant la valeur et le type de l'expression, l'instruction conditionnelle suivante if renvoie false :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

Exécuter l'instance» Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Ce type d'erreur se produit souvent dans l'instruction switch. L'instruction switch utilise l'opérateur d'identité (===) à des fins de comparaison :

Les instances suivantes exécuteront des fenêtres contextuelles d'alerte :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case 10: alert("Hello");
}
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher les instances en ligne

Les instances suivantes n'exécuteront pas la fenêtre contextuelle d'alerte en raison de types incohérents :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Remarques sur l'ajout et connexion

Addition est l'addition de deux nombres. La

Concaténation est une concaténation de deux chaînes.

JavaScript utilise l'opérateur + pour l'addition et la concaténation.

Ensuite, nous pouvons voir la différence entre l'ajout de deux nombres et la concaténation de nombres et de chaînes à travers des exemples :

Exemples

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Les résultats de l'ajout de variables sont également incohérents :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Remarque sur l'utilisation de données à virgule flottante Remarque

Toutes les données en JavaScript sont stockées dans des

données à virgule flottante (float) 64 bits.

Tous les langages de programmation, y compris JavaScript, ont des difficultés à déterminer l'exactitude des données à virgule flottante :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Exécuter l'exemple»Cliquez sur le bouton «Exécuter l'exemple» pour voir l'exemple en ligne

J'ai résolu le problème ci-dessus en utilisant la multiplication et la division d'entiers :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Branche de chaîne JavaScript

Exécution de JavaScript nous sommes dans Les instructions de saut de ligne sont utilisées dans les chaînes :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
	"Hello World!";
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter Bouton "Instance" pour afficher l'exemple en ligne

Cependant, l'utilisation du retour chariot et du saut de ligne directement dans une chaîne entraînera une erreur :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>about:newtab

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Nous pouvons sélectionner l'outil de développement ou appuyer sur F12 pour afficher le message d'erreur :

QQ截图20161017174526.png

Les sauts de ligne de chaîne nécessitent l'utilisation d'une barre oblique inverse(), comme indiqué ci-dessous :

Utilisation incorrecte du point-virgule

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Dans l'exemple suivant, en raison d'une utilisation incorrecte des points-virgules, le bloc de code dans l'instruction if ne sera pas exécuté :

Remarques sur l'utilisation de l'instruction Return

JavaScript se termine automatiquement à la dernière ligne de code par défaut.

Les deux exemples suivants renvoient le même résultat (un avec un point-virgule et un sans) :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10
    return a * power
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10;
    return a * power;
}
</script>

</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

JavaScript peut également utiliser plusieurs lignes pour terminer une instruction. Bouton "Exécuter l'instance" pour afficher l'instance en ligne

Cependant, les résultats de l'instance suivants renverront
non défini

 :

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return a * power;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Pourquoi y a-t-il un tel résultat ? Car en JavaScript, le code de l'exemple 4 est cohérent avec le code suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>

</body>
</html>

Analyser

S'il s'agit d'une instruction incomplète, comme suit : 

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}

JavaScript va essayer en lisant la deuxième ligne de la déclaration : 

var

Mais comme la déclaration est complète comme ceci : 

power = 10;

JavaScript fermera automatiquement la déclaration : 

return

En JavaScript, cassez The le numéro est facultatif.

Puisque return est une instruction complète, JavaScript fermera l'instruction return.

Note注意：不用对 return 语句进行断行。

Utiliser des noms pour indexer dans des tableaux

De nombreux langages de programmation autorisent l'utilisation de noms comme index dans des tableaux.

Un tableau qui utilise des noms comme index est appelé tableau associatif (ou hachage).

JavaScript ne prend pas en charge l'utilisation de noms pour indexer les tableaux, seuls les index numériques sont autorisés.

Instance

return;

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

En JavaScript, les objets utilisent des noms comme index.

Si vous utilisez des noms comme index, JavaScript redéfinira le tableau en tant qu'objet standard lors de son accès.

Après avoir effectué cette opération, les méthodes et propriétés du tableau ne peuvent plus être utilisées, sinon une erreur se produira :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Définissez les éléments du tableau et vous ne pouvez pas ajouter de virgule à la fin

Mauvaise façon de définition :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象，数组的方法及属性将不能再使用，否则会产生错误:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

La bonne façon de définir :

points = [40, 100, 1, 5, 25, 10,];

Définissez l'objet, et vous ne pouvez pas ajouter de virgule à la fin

La mauvaise façon de définir :

points = [40, 100, 1, 5, 25, 10];

Définition correcte : 

websites = {site:"php中文网", url:"www.php.cn", like:460,}

Indéfini n'est pas nul

en JavaScript, null est utilisé pour les objets, undefined est utilisé pour les variables, les propriétés et la méthode.

L'objet ne peut être nul que s'il est défini, sinon il est indéfini.

Si nous voulons tester si l'objet existe, une erreur sera générée si l'objet n'est pas encore défini.

Utilisation incorrecte : 

websites = {site:"php中文网", url:"www.php.cn", like:460}

La méthode correcte est que nous devons d'abord utiliser typeof pour détecter si l'objet est défini : 

if (myObj !== null && typeof myObj !== "undefined")

Portée du bloc de programme

JavaScript ne crée pas de nouvelle portée dans chaque bloc de code. Généralement, la portée de chaque bloc de code est globale.

La variable i dans le code suivant renvoie 10 au lieu de non défini :

Instance

if (typeof myObj !== "undefined" && myObj !== null)

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


←
→