Maison > interface Web > js tutoriel > Six choses auxquelles prêter attention dans le code JavaScript quotidien

Six choses auxquelles prêter attention dans le code JavaScript quotidien

韦小宝
Libérer: 2018-03-14 13:06:56
original
1284 Les gens l'ont consulté

Tout le monde doit faire attention à savoir si certains codes vont mal dans le développement quotidien de JavaScript Aujourd'hui, nous allons résumer les six parties sujettes aux erreurs auxquelles il faut prêter attention dans le développement quotidien de JavaScript I. je pense que de nombreux étudiants ont besoin de le lire. Sans plus attendre, allons droit au but !

Exécutez la fonction immédiatement

Exécutez la fonction immédiatement, généralement comme une fermeture, et pouvez construire une portée de variable au niveau de la fonction. La méthode d'écriture générale est la suivante :

(function () {
  // code
})();
Copier après la connexion

Cependant, cette méthode d'écriture peut facilement poser quelques problèmes. Par exemple, si le code ci-dessus ne se termine pas par un point-virgule :

var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()
Copier après la connexion
, alors il devrait être écrit comme ceci :

void function () {
  // code
}();
Copier après la connexion
ou :

!function () {
  // code
}();
Copier après la connexion
;(function(){
   //code
})()
Copier après la connexion
Celui que vous choisissez dépend de vos préférences personnelles. Maintenant, il existe une spécification en js appelée. standardjs, qui préconise d'omettre le point-virgule en fin de ligne (je n'y suis pas habitué), il faut changer cette habitude.

2. Objet vide null

Depuis la naissance de JS, null a reçu le type

Object class On peut dire que c'est un bug permanent de JS. Cela ne s’est jamais produit et ne se reproduira plus. Cela ne changera pas.

null n'a pas les caractéristiques de base d'un objet et appartient au

type de données d'origine. Ce que je veux expliquer, c'est qu'avant de juger si une variable est un objet, vous devez d'abord juger si elle est nulle.

if (opt!== null && typeof opt=== 'object') {
  // opt是一个对象
}
Copier après la connexion
3. Ne comparez pas les décimales de manière arbitraire

Lorsque vous effectuez des calculs entre décimales, faites attention au problème de précision avant les nombres à virgule flottante.

Par exemple : 0,1+0,2 est-il égal à 0,3 ? La réponse est : 0,1+0,2=0,30000000000000004

De même : 0,4-0,3=0,10000000000000003

S'il existe un tel calcul , puis convertissez d'abord la décimale en

chaîne et utilisez toFixed pour supprimer les décimales à des fins de comparaison :

(0.1 + 0.2).toFixed(2) === '0.30'
Copier après la connexion
Remarque : lorsque la différence entre deux nombres est suffisamment petite dans une certaine plage , ils peuvent être considérés comme égaux.

Math.abs(0.1+0.2 - 0.3) <= 1e-10 // true
Copier après la connexion
4. Rappelez-vous toujours NaN

Quand il s'agit de NaN, il y a une caractéristique à laquelle tout le monde devrait penser, NaN !==NaN. Oui, c'est cool.

Si vous avez besoin de déterminer si une variable est NaN, comparez-la simplement avec elle-même. Si elles ne sont pas égales, alors c'est NaN.

Pour déterminer si un nombre est NaN, vous pouvez utiliser la méthode isNaN(). Mais si vous ne connaissez pas le type de données spécifique d'une variable, n'utilisez pas cette méthode pour la juger facilement, car isNaN a une caractéristique étrange : elle convertira d'abord la variable à juger en une valeur numérique pour le calcul.

isNaN(&#39;abc&#39;) // true
isNaN(&#39;123&#39;) // false
isNaN(&#39;&#39;) // false
isNaN([]) // false
isNaN({}) // true
Copier après la connexion
Ensuite, cela provoquera des surprises dans votre jugement.

Un autre point à noter est de ne jamais comparer aucune variable avec NaN, telle que : opt===NaN.

5. En plus de comparer null et undefined, n'utilisez jamais de == and ! =

Je pense que vous verrez de nombreux articles et spécifications disant que essayez d'utiliser === et ! ==, n'utilisez pas == et ! =, la raison est que ce dernier effectuera une

conversion de type forcée (provoquant des bugs difficiles à trouver).

Jetez d'abord un coup d'œil :

&#39;true&#39; == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false
Copier après la connexion
Si vous avez des doutes sur le jugement ci-dessus, rappelez-vous une règle :

null == null // => true
undefined == undefined  // => true
null == undefined // => true
undefined == null // => true
x == null // => false (x 非 null 或 undefined)
x == undefined // => false (x 非 null 或 undefined)
Copier après la connexion
C'est-à-dire, jugez si x est null ou undefined, alors utilisez ==, sinon, ne l'utilisez jamais.

6. À utiliser avec prudence || Définir la valeur par défaut

Définir une valeur par défaut pour une variable Je pense que les développeurs JS qui sont dans le jeu depuis de nombreuses années écriront comme ceci :

page = page || 0;
data = data || '你好';
Copier après la connexion
Expliquez que arg1 || arg2 signifie que si arg1 peut être converti en vrai, alors prenez arg1, sinon prenez arg2.

Alors jetons d'abord un coup d'oeil aux valeurs qui ne peuvent pas être converties en vraies ?

1.undéfini

2.null

3.NaN

4. Entier 0

5. Chaîne vide « »

所以如果当用户传给arg1的参数是0或者为空字符串“”的时候,那么最终的值就会取默认的(||后面)值是不是?好,问题来了。如果用户传给后台的查询关键字data(上面代码)是空字符串“”,那么就应该按照空字符串“”去后台数据库查询,而结果传给后台的却是“你好”,显然查询结果也就不对。

好,回到主题,实际上只有undefined才应该被认为是用户没有指定其具体值,我曾看过有人这样理解(null 表示 用户让你给他把这个位置空着;而 undefined 表示 用户没发表意见

so :

page = page !== undefined ? page : 0;
data = data !== undefined ? data :'你好';
Copier après la connexion

只需判断undefined即可。

个人理解如果有需求,可以把null加进去判断。

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