Erreurs courantes JavaScript

Ce chapitre pointe quelques erreurs courantes en JavaScript.

utiliser意外ment l'opérateur d'affectation

Si le programmeur utilise if Instructions utilisant意外ment l'opérateur d'affectation (=）au lieu de l'opérateur de comparaison (===），le programme JavaScript peut produire des résultats imprévus.

Cette if Instructions retourne false（comme prévu），parce que x n'est pas égal à 10 :

var x = 0;
if (x == 10)

Essayer vous-même

Cette if Instructions retourne true（peut-être pas comme prévu），parce que 10 est vrai :

var x = 0;
if (x = 10)

Essayer vous-même

Cette if Instructions retourne false（peut-être pas comme prévu），parce que 0 est faux :

var x = 0;
if (x = 0)

Essayer vous-même

L'affectation retourne toujours la valeur de l'affectation.

Comparaison lointaine attendue

Dans les comparaisons conventionnelles, le type de données n'est pas important. Cette if Instructions retourne true:

var x = 10;
var y = "10";
if (x == y)

Essayer vous-même

Dans les comparaisons strictes, le type de données est vraiment important. Cette if Instructions retourne false:

var x = 10;
var y = "10";
if (x === y)

Essayer vous-même

Une erreur courante est d'oublier de switch Instructions utilisant des comparaisons strictes :

Cette switch L'instruction montre le boîte de dialogue :

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

Essayer vous-même

Cette switch Les instructions ne montre pas de boîte de dialogue :

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

Essayer vous-même

Addition et cascade trompeuses

AdditionPourNumérique.

Cascade (Concaténation)PourChaînes.

En JavaScript, ces deux opérations utilisent le même + Opérateurs.

C'est pourquoi ajouter des nombres comme des nombres et comme des chaînes de caractères produira des résultats différents :

var x = 10 + 5;          // Le résultat de x est 15
var x = 10 + "5";         // Le résultat de x est "105"

Essayer vous-même

Si deux variables sont ajoutées, il est difficile de prédire le résultat :

var x = 10;
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"

Essayer vous-même

Les nombres à virgule flottante trompeurs

Les nombres en JavaScript sont tous stockés en 64 bitsLes nombres à virgule flottante (Floats).

Tous les langages de programmation, y compris JavaScript, ont des difficultés à gérer les valeurs flottantes :

var x = 0.1;
var y = 0.2;
var z = x + y             // le résultat dans z ne sera pas 0.3

Essayer vous-même

Pour résoudre ce problème, utilisez des opérations de multiplication et de division :

Exemple

var z = (x * 10 + y * 10) / 10;       // le résultat dans z sera 0.3

Essayer vous-même

Renvoyer une ligne dans une chaîne de caractères JavaScript

JavaScript vous permet de renvoyer une instruction à deux lignes :

Exemple 1

var x =
"Hello World!";

Essayer vous-même

Mais, renvoyer une ligne au milieu de la chaîne de caractères n'est pas correct :

Exemple 2

var x = "Hello
World!";

Essayer vous-même

Si vous devez renvoyer une ligne dans une chaîne de caractères, vous devez utiliser les barres obliques inverses :

Exemple 3

var x = "Hello ",
World!";

Essayer vous-même

Point-virgule mal placé

En raison d'un point-virgule erroné, ce bloc de code s'exécutera indépendamment de la valeur de x :

if (x == 19);
{
     // bloc de code
}

Essayer vous-même

Renvoyer une instruction return

Fermer automatiquement les instructions à la fin de la ligne est le comportement par défaut de JavaScript.

Pour cette raison, les deux exemples suivants retourneront le même résultat :

Exemple 1

function myFunction(a) {
    var power = 10  
    return a * power
}

Essayer vous-même

Exemple 2

function myFunction(a) {
    var power = 10;
    return a * power;
}

Essayer vous-même

JavaScript permet également de renvoyer une instruction à deux lignes.

Pour cette raison, l'exemple 3 retournera également le même résultat :

Exemple 3

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

Essayer vous-même

Mais, si vous mettez return Que se passe-t-il si l'instruction est renvoyée à deux lignes ?

Exemple 4

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

Essayer vous-même

Cette fonction retournera undefined!

Pourquoi ? Parce que JavaScript pense que vous voulez :

Exemple 5

function myFunction(a) {
     var
    power = 10;  
    return;
    a * power;
}

Essayer vous-même

Explication

Si une instruction n'est pas complète :

var

JavaScript complète cette instruction en lisant la ligne suivante :

power = 10;

Mais parce que cette instruction est complète :

return

JavaScript ferme automatiquement cette instruction :

return;

Cela se produit parce que dans JavaScript, l'utilisation du point-virgule pour fermer (terminer) une instruction est optionnelle.

JavaScript ferme la ligne à la fin return une instruction, car elle est déjà une instruction complète.

Ne jamais surcharger return Les instructions sont renvoyées à la ligne.

Accéder à un tableau par l'index de nommage

De nombreux langages de programmation supportent les tableaux avec des indices nommés.

Les tableaux avec des indices nommés sont appelés tableaux associatifs (ou tableaux hachés).

JavaScript Non supportéTableaux avec des indices nommés.

Dans JavaScript,TableauxUtilisationIndices numériques:

Exemple

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length retournera 3
var y = person[0];              // person[0] retournera "Bill"

Essayer vous-même

Dans JavaScript,ObjetsUtilisationIndices nommés.

Si vous utilisez des indices nommés, JavaScript redéfinira l'array en objet standard lors de l'accès à l'array.

Après redéfinition automatique, les méthodes ou propriétés de tableau produiront des résultats non définis ou incorrects :

Exemple

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length retournera 0
var y = person[0];              // person[0] retournera undefined

Essayer vous-même

Utilisez des virgules pour terminer la définition

Les virgules en fin de définition des objets et des tableaux sont légitimes dans ECMAScript 5.

Exemple d'instance d'objet :

person = {firstName:"Bill", lastName:"Gates", age:62,}

Exemple d'instance d'array :

points = [35, 450, 2, 7, 30, 16,];

Attention !!

Internet Explorer 8 va s'effondrer.

Le JSON n'autorise pas les virgules en fin de ligne.

JSON :

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON :

points = [35, 450, 2, 7, 30, 16];

Undefined n'est pas Null

Les objets JavaScript, variables, propriétés et méthodes peuvent être non définis.

De plus, la valeur d'un objet JavaScript vide peut être : null.

Cela pourrait rendre difficile de tester si l'objet est vide.

Vous pouvez tester si le type est : undefined，Pour tester l'existence de l'objet :

Exemple

if (typeof myObj === "undefined")

Essayer vous-même

Mais vous ne pouvez pas tester si l'objet est nullparce que si l'objet est indéfini, une erreur sera lancée :

Incorrect :

if (myObj === null)

Pour résoudre ce problème, il faut tester si l'objet est nullau lieu de l'indéfini.

Cependant, cela entraînera toujours une erreur :

Incorrect :

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

Par conséquent, avant de tester non null, il faut d'abord tester l'indéfini :

Correct :

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

Essayer vous-même

n'attend pas de portée de bloc

JavaScript Necrée un nouveau scope pour chaque bloc de code.

De nombreux langages de programmation le font ainsi, mais JavaScript Pas du tout.

croire que ce code renverra undefinedest une erreur courante des développeurs JavaScript débutants :

Exemple

for (var i = 0; i < 10; i++) {
  // Bloc de code
}
return i;

Essayer vous-même