Quels sont les principaux pièges JavaScript?

Question

Je prévois de faire une présentation sur JavaScript et dans le processus de préparation, je me suis demandé quels sont les principaux pièges dans lesquels les recrues tombent.

Je sais que j'ai eu quelques problèmes avant de bien comprendre la fermeture, mais une grande partie du comportement étrange de JavaScript n'est plus quelque chose auquel je pense ...

Alors, quels pièges devriez-vous certainement signaler aux recrues?

Answer 1

Boolean type de conversion.

''        ==   '0'           //false
0         ==   ''            //true
0         ==   '0'           //true
false     ==   'false'       //false
false     ==   '0'           //true
false     ==   undefined     //false
false     ==   null          //false
null      ==   undefined     //true
" \t\r\n" ==   0             //true

Ainsi que la différence entre null et undefined. Comme indiqué dans le tableau ci-dessus, en comparant null & undefined avec == retourne vrai, mais avec === , elle retourne false. Ce comportement de sens qu'une fois que vous comprenez que undefined est très différente d'une variable ayant un null de la valeur, et de tenir quelque chose de la valeur undefined est différent de quelque chose étant pas défini.

Answer 2

Ne pas accidentellement laisser une virgule dans une définition de l'objet littéral ou IE échoue et que vous ne remarquerez même pas que beaucoup plus tard parce que vous n'avez jamais utiliser IE pour le développement et d'ici là, il pourrait sucer essayer de comprendre ce qui s'est passé.

var foo = { 
    bar: "bar", 
    baz: "baz", 
};

Remarque @JulianR commentaire: Dans les tableaux, c'est à dire ne s'agit pas directement en jetant quelques erreur de syntaxe, mais échoue lorsque vous essayez d'utiliser le tableau car la virgule ajoutée rend IE pense qu'il y a un élément de plus dans le tableau, avec la valeur undefined, qu'il est réellement. Donc si jamais vous avez une erreur parce que, pour une raison quelconque, le dernier élément d'un tableau est undefined: c'est une virgule.

Answer 3

Il est vrai que j'ai été coupable de certains de ces dans le passé, pour votre amusement c'est ceux en gras:

• Ne sachant pas incorrect (et le très peu) les utilisations eval

  eval("obj."+prop);

• À l'aide de with des déclarations
• À l'aide de parseInt(str, base) , sans préciser le base argument.
• À l'aide de this minuterie/fonctions de rappel.
• L'utilisation d'eval-comme des expressions dans les minuteries

  setTimeout("someFunc(myScopedVarWhoops)");

• La pensée jQuery est le nom de la langue que vous codez
• L'exécution d'un simple JavaScript tâches à l'aide d'un framework - $(1).plus(1) quelqu'un? ;-)
• À l'aide de continue sans incrémenter ou le réglage de la variable de condition.
• Les inondations de l'espace de noms global avec des variables
• Oublier var avant for des déclarations. for (i=0;i<10;i++)
• À l'aide d'un obfuscateur et simplement le laisser courir sauvage dans votre code
• Pas vraiment un piège, mais inutile - return condition ? true : false; au lieu de return condition;
• Pas de commenter votre code, s'applique à toutes les langues vraiment.
• À l'aide de try...catch...finally des déclarations d'intercepter les erreurs au lieu d'utiliser if des déclarations de vérifier variables.
• Bêtement en essayant d'arrêter "afficher la source" en bloquant droit de la souris, les clics sur vos pages (j'étais jeune *sanglots*!)
• À l'aide de { 0: "Foo", 1:"Bar", 2:"Foobar" } au lieu de [ "Foo", "Bar", "Foobar" ]
• À l'aide de parseInt() sur la saisie de l'utilisateur

  parseInt("1,000") // -> 1, wrong!
  +"1,000" // -> NaN, correct!

Certains, déjà mentionné:

• Pas à l'aide d'égalité stricte (===) des opérateurs à chaque fois que possible
• Réglage des gestionnaires d'événement de la valeur de retour d'une fonction au lieu d'une référence à ladite fonction
• Pas ; de terminaison états correctement
• À l'aide de for...in boucles sur les tableaux

Pourrait penser à de plus après j'ai dormi :-)

Answer 4

• Oublier de déclarer des variables avec var
• Incompréhension (ou incompréhension) de la portée et des fermetures variables
• Essayer de résoudre des problèmes de compatibilité désagréables que les équipes du framework ont déjà résolus

Answer 5

+ pour concaténer des chaînes:

 var a = '2';
var b = 3;

a * b #  6
a - b # -1
a + b #  23