JavaScript Erreurs courantes
Dans ce chapitre, nous aborderons les erreurs courantes en JavaScript.
Mauvaise utilisation de l'opérateur d'affectation
Dans un programme JavaScript, si vous utilisez le signe égal (=) de l'opérateur d'affectation dans une instruction conditionnelle if, cela produira un résultat incorrect. La bonne méthode consiste à utiliser le double signe égal (==) de l'opérateur de comparaison.
ifL'instruction conditionnelle renvoiefalse(comme prévu) car x n'est pas égal à 10 :
ifL'instruction conditionnelle renvoietrue(contrairement à ce que nous attendions) car l'instruction conditionnelle assigne x = 10, et 10 est vrai :
ifL'instruction conditionnellefalse(contrairement à ce que nous attendions) car l'instruction conditionnelle assigne x = 0, et 0 est faux :
 |
Une instruction d'affectation renvoie la valeur de la variable. |
|---|
Erreurs courantes avec les opérateurs de comparaison
Dans une comparaison normale, le type de données est ignoré. L'instruction conditionnelle if suivante renvoie true :
Dans une comparaison stricte, === est l'opérateur d'identité, qui vérifie à la fois la valeur et le type des expressions. L'instruction conditionnelle if suivante renvoie false :
Ce type d'erreur se produit souvent dans switch, car les instructions switch utilisent l'opérateur d'identité (===) pour la comparaison :
L'exemple suivant déclenchera une popup d'alerte :
L'exemple suivant ne déclenchera pas de popup d'alerte car les types ne correspondent pas :
Précautions pour l'addition et la concaténation
L'additionconsiste à additionner deuxnombresensemble.
La concaténationconsiste à joindre deuxchaînes de caractèresensemble.
JavaScript utilise l'opérateur + à la fois pour l'addition et la concaténation.
Ensuite, nous pouvons utiliser des exemples pour voir la différence entre l'addition de deux nombres et la concaténation d'un nombre avec une chaîne :
var x = 10 + "5"; // Le résultat de x est "105"
Essayez-le vous-même »
L'utilisation de variables pour l'addition produit également des résultats incohérents :
var y = 5;
var z = x + y; // Le résultat de z est 15
var x = 10;
var y = "5";
var z = x + y; // Le résultat de z est "105"
Essayez-le vous-même »
Précautions pour les données à virgule flottante
Toutes les données en JavaScript sont stockées sous forme dedonnées à virgule flottante (float) de 64 bitspour le stockage.
Tous les langages de programmation, y compris JavaScript, ont du mal à déterminer la précision des données à virgule flottante :
var y = 0.2;
var z = x + y // Le résultat de z est 0.30000000000000004
if (z == 0.3) // renvoie false
Essayez-le vous-même »
Pour résoudre le problème ci-dessus, vous pouvez utiliser la multiplication et la division d'entiers :
Pour plus de détails, vous pouvez consulter :Problèmes de précision en JavaScript et solutions
Sauts de ligne dans les chaînes de caractères JavaScript
JavaScript nous permet d'utiliser des sauts de ligne dans les chaînes de caractères :
Cependant, utiliser directement un saut de ligne avec retour chariot dans une chaîne provoquera une erreur :
Vous pouvez ouvrir les outils de développement ou appuyer sur F12 pour afficher le message d'erreur :
Pour passer à la ligne dans une chaîne, vous devez utiliser une barre oblique inverse (\), comme montré ci-dessous :
Utilisation incorrecte des points-virgules
Dans l'exemple suivant, l'instruction if perd son corps. Le corps original de l'instruction if est exécuté comme un bloc de code indépendant, ce qui conduit à une sortie incorrecte.
En raison de l'utilisation incorrecte du point-virgule, le bloc de code dans l'instruction if s'exécutera toujours :
Remarques sur l'instruction return
Par défaut, JavaScript se termine automatiquement à la fin d'une ligne.
Les deux exemples suivants retournent le même résultat (l'un a un point-virgule, l'autre non) :
JavaScript peut également utiliser plusieurs lignes pour représenter une instruction, ce qui signifie qu'une instruction peut être répartie sur plusieurs lignes.
Les exemples suivants retournent le même résultat :
Cependant, l'exemple suivant retourneraundefined：
Pourquoi cela se produit-il ? Parce qu'en JavaScript, le code de l'exemple 4 est équivalent au code suivant :
function myFunction(a) {
var
power = 10;
return; // 分号结束，返回 undefined
a * power;
}
Explication
S'il s'agit d'une instruction incomplète, comme ci-dessous :
var
JavaScript essaiera de lire l'instruction sur la deuxième ligne :
power = 10;
Mais parce qu'une telle instruction est complète :
return
JavaScript fermera automatiquement l'instruction :
return;
En JavaScript, les points-virgules sont facultatifs.
Parce que return est une instruction complète, JavaScript terminera l'instruction return.
|
|
Remarque :Ne coupez pas l'instruction return sur plusieurs lignes. |
|---|
Utilisation de noms pour indexer des tableaux
De nombreux langages de programmation permettent d'utiliser des noms comme indices de tableaux.
Les tableaux qui utilisent des noms comme indices sont appelés tableaux associatifs (ou tables de hachage).
JavaScript ne prend pas en charge l'utilisation de noms pour indexer des tableaux ; il n'autorise que les indices numériques.
Exemple
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length renvoie 3
var y = person[0]; // person
Essayez-le vous-même »
En JavaScript,les objetsutilisentdes noms comme index.。
Si vous utilisez des noms comme index, JavaScript redéfinira le tableau comme un objet standard lors de l'accès au tableau.
Après cette opération, les méthodes et propriétés du tableau ne seront plus utilisables, sinon des erreurs se produiront :
Exemple
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length renvoie 0
var y = person[0]; // person
Essayez-le vous-même »
Lors de la définition d'éléments de tableau, n'ajoutez pas de virgule finale
Ajouter une virgule après la dernière valeur d'un tableau est syntaxiquement correct, mais différents navigateurs peuvent produire des résultats différents.
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4.
Manière correcte de définir :
points = [40, 100, 1, 5, 25, 10];
Lors de la définition d'un objet, n'ajoutez pas de virgule finale
Manière incorrecte de définir :
websites = {site:"Example", url:"www.example.com", like:460,}
Manière correcte de définir :
websites = {site:"Example", url:"www.example.com", like:460}
Undefined n'est pas Null
En JavaScript,nullest utilisé pour les objets,undefinedest utilisé pour les variables, les propriétés et les méthodes.
Un objet ne peut être null que s'il a été défini ; sinon, il est undefined.
Si nous voulons tester si un objet existe, cela lèvera une erreur si l'objet n'a pas encore été défini.
Utilisation incorrecte :
if (myObj !== null && typeof myObj !== "undefined")
La manière correcte consiste d'abord à utiliser typeof pour vérifier si l'objet est défini :
if (typeof myObj !== "undefined" && myObj !== null)
Portée de bloc
Dans chaque bloc de code, JavaScript ne crée pas de nouvelle portée ; généralement, la portée de chaque bloc de code est globale.
La variable i dans le code suivant renvoie 10, et non undefined :
Autres extensions