La différence entre for et for in en javascript, et pourquoi for in n'est pas recommandé

Il existe deux façons de parcourir le tableau

dans js

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}

Dans des circonstances normales, les résultats des deux ci-dessus les façons de parcourir le tableau sont les mêmes. Parlons d'abord de la première différence entre les deux

Le i dans la boucle for standard est de type number, qui représente l'indice du tableau, mais le i dans la boucle foreach représente que la clé du array est de type string Parce que tout dans js est un objet . Essayez-le vous-même alert(typeof i); Cette différence est un problème mineur. Maintenant que j'ajoute le code suivant, le résultat de l'exécution ci-dessus sera différent.

//扩展了js原生的Array
Array.prototype.test=function()
 
}

Essayez-le et voyez ce que fait le code ci-dessus. Nous avons constaté que la boucle for standard boucle toujours réellement sur le tableau, mais à ce stade, la boucle foreach imprime la méthode de test que je viens d'écrire. C'est la plus grande différence entre for et foreach pour parcourir le tableau. Si nous utilisons foreach pour parcourir le tableau dans le projet, supposons qu'un jour quelqu'un étende accidentellement la classe Array native de js, ou introduise un framework js externe et étend également le natif. Tableau. . Vient ensuite le problème.

Pourquoi ne pas utiliser for in dans la déclaration ?

Mots clés : classe Array native, classe Array étendue
Le bug potentiel de l'utilisation de l'instruction for in pour parcourir des objets tableau est : si la classe Array native est modifiée par un autre script js bibliothèques Extension de prototype (par exemple, en ajoutant une méthode toJSON supplémentaire, à savoir Array.prototype.toJSON=xxxx), alors la logique d'utilisation de for in pour parcourir l'objet Array étendu sera différente de la logique de traversée l'objet Array natif.
Pour un exemple simple,

var x=[1]; 
for(var s in x){ 
alert(s); 
};

Selon le bon sens, si Array est une classe js native, l'instruction ci-dessus ne doit exécuter la méthode d'alerte qu'une seule fois, et s est l'index de le tableau 0 . Cependant, si la classe Array est étendue avec une méthode toJSON supplémentaire, l'instruction ci-dessus exécutera alert deux fois, la première fois s est l'index 0 et la deuxième fois s est le nom de la méthode « toJSON ».

Si la logique du code que vous concevez est basée sur la classe native Array, et qu'un jour votre collègue fait référence à une bibliothèque JS tierce sur la page, et que cette bibliothèque étend la classe Array, le résultat sera difficile Imaginez qu'il est très probable que la logique du code d'origine ne tiendra plus.

Concernant ce genre de bibliothèque qui étend les classes JS natives, une très connue est prototype.js, qui étend de nombreuses méthodes à la classe Array comme toJSON, each, etc. Je comprends maintenant pourquoi le fondateur de jquery était si en colère contre le prototype (de nombreuses personnes utilisent jquery et prototype sur la même page pour des raisons particulières. Il y aura de nombreux problèmes de conflit inattendus qui ne pourront pas être résolus par un simple noConflict. ). De plus, si l'auteur de jqModal comprend mon article, il se plaindra probablement du prototype et dira : "Il n'est pas judicieux pour moi d'utiliser for in pour le parcours de tableaux, mais le pire, c'est le prototype..."

Comme mentionné ci-dessus, si vous utilisez jqModal et que vous utilisez également un prototype pour d'autres raisons, félicitations, vous avez été trompé. Le conflit empêchera la boîte contextuelle de jqModal d'être fermée automatiquement à l'aide du bouton défini par closeClass sous ie6 et ie7. Suivez le code de débogage et vous constaterez que l'exception se trouve dans la boucle for in de la méthode hs mentionnée au début de cet article. . .
3. Résolvez le problème
Lorsque vous parcourez le tableau, utilisez l'instruction for var au lieu de for in.

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!