Résumé des astuces Javascript courantes_astuces Javascript

Les exemples de cet article décrivent des astuces Javascript courantes. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Expressions booléennes vraies et fausses

Les expressions booléennes suivantes renvoient toutes false :

nul
indéfini
''chaîne vide
0 numéro 0

Mais soyez prudent avec ce qui suit, ils renvoient tous vrai :

'0' chaîne 0
[] Tableau vide
{} objet vide

Le morceau de code terrible suivant :

Copier le code Le code est le suivant :

while (x != null) {

Vous pouvez l'écrire directement sous la forme suivante (tant que vous voulez que x soit autre que 0 et une chaîne vide, et faux) :

Copier le code Le code est le suivant :

tandis que (x) {

Si vous souhaitez vérifier si une chaîne est nulle ou vide :

Copier le code Le code est le suivant :

if (y != null && y != '') {

Mais ce serait mieux :

Copier le code Le code est le suivant :

si (y) {

Remarque : Il y a encore beaucoup de choses auxquelles il faut faire attention, telles que :

Booléen('0') == vrai
'0' != vrai
0 != nul
0 == []
0 == faux
Booléen(null) ==faux
nul != vrai
nul != faux
Booléen (non défini) == faux
indéfini != vrai
indéfini != faux
Booléen([]) == vrai
[] != vrai
[] == faux
Booléen({}) == vrai
{} != vrai
{} != faux

2. Opérateur conditionnel (ternaire) (?:)

L'opérateur ternaire est utilisé pour remplacer le code suivant :

if (val != 0) {
 return foo();
} else {
 return bar();
}

Vous pouvez écrire :

Copier le code Le code est le suivant :

return val foo() : bar();

Également utile lors de la génération de code HTML :

Copier le code Le code est le suivant :

var html = '';

Trois, && et ||

Les opérateurs booléens binaires peuvent être court-circuités et le dernier élément ne sera évalué que lorsque cela est nécessaire.

"||" est appelé l'opérateur « par défaut » car il fonctionne comme ceci :

function foo(opt_win) {
 var win;
 if (opt_win) {
  win = opt_win;
 } else {
  win = window;
 }
 // ...
}

Vous pouvez utiliser ceci pour simplifier le code ci-dessus :

function foo(opt_win) {
 var win = opt_win || window;
 // ...
}

"&&" peut également être un code court. Par exemple :

if (node) {
 if (node.kids) {
  if (node.kids[index]) {
   foo(node.kids[index]);
  }
 }
}

Vous pouvez l'utiliser comme ceci :

if (node && node.kids && node.kids[index]) {
 foo(node.kids[index]);
}

ou :

var kid = node && node.kids && node.kids[index];
if (kid) {
 foo(kid);
}

Mais c'est un peu trop :

Copier le code Le code est le suivant :

node && node.kids && node.kids[index] && foo( node.kids [index]);

4. Utilisez join() pour créer une chaîne

est généralement utilisé comme ceci :

function listHtml(items) {
 var html = '';
 for (var i = 0; i < items.length; ++i) {
 if(i > 0) { html += ', ';
 }
 html += itemHtml(items[i]);
 }
 html +='';
 return html;
}

Mais c'est très lent sous IE. Vous pouvez utiliser la méthode suivante :

function listHtml(items) {
 var html = [];
 for (var i = 0; i < items.length; ++i) {
  html[i] = itemHtml(items[i]);
 }
 return '' + html.join(', ') + '';
}

Vous pouvez également utiliser un tableau comme constructeur de chaîne, puis le convertir en chaîne via myArray.join(''). Cependant, comme l'opération d'affectation est plus rapide que le push() du tableau, essayez d'utiliser. l'opération d'affectation.

5. Liste des nœuds de traversée

Les listes de nœuds sont implémentées en ajoutant un filtre à l'itérateur de nœud. Cela signifie que la complexité temporelle pour obtenir ses attributs, tels que la longueur, est O(n), et que le parcours de la liste entière via la longueur nécessite O(n^2). ).

var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0; i < paragraphs.length; i++) {
 doSomething(paragraphs[i]);
}

Ce sera mieux :

var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
 doSomething(paragraph);
}

Cette méthode fonctionne pour toutes les collections et tous les tableaux (tant que le tableau ne contient pas de valeurs fausses).

Dans l'exemple ci-dessus, vous pouvez également parcourir les nœuds enfants via firstChild et nextSibling.

var parentNode = document.getElementByIdx_x('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
 doSomething(child);
}

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.