Boucle for assez bizarre

Bonjour à tous,
Lors de l'analyse d'un script trouvé sur le web, je suis tombé sur une boucle for vraiment bizarre et j'aimerais avoir votre avis la-dessus.
Je l'ai reproduite exprès pour vous faire un exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<span class="a">Span 1</span> <span class="b">Span 2</span> <span class="a">Span 3</span>   <script> function maFonction(obj){    obj.innerHTML = 'Remplacé'; }   for(    var obj, i=0, spans = Array.prototype.slice.call(document.getElementsByTagName('span'), 0);    i<spans.length;    obj = spans[i++], obj.className !== 'b' || maFonction(obj) ); </script>

---

Je ne sais pas si c'est moi mais je trouve cela vraiment crade et très difficile à comprendre. Ce qui me perturbe c'est que le script entier est très bien écrit et je tombe sur cet immondice :aie: Qui me rend perplexe.
Qu'en pensez-vous ?

Le point virgule a la fin sert a rien

En fait, je voulais savoir ce que vous pensiez de cette boucle, je ne cherche pas une alternative, je sais très bien ce qu'elle fait et comment la simplifier :roll:

:salut:

Pour moi c'est une complication inutile qui fait mal son travail !

En partant de ceci :

Code:

---

1 2 3 4 5 6

<div> <span class="c a b">hello</span> mais <span class="b">bonjour</span> mais <span class="d">Bonsoir</span> mais <span class="b a">adieu</span> </div>

---

Le code JS :

Code:

---

1 2 3 4 5 6 7

const elemsSpan = document.querySelectorAll('span');   for (const elemSpan of elemsSpan){ if (elemSpan.classList.contains('b')) { elemSpan.textContent = 'Remplacé'; } }

---

Le code Js doit agir sur tous les cas où la classe b est présente, et on doit obtenir :

Code:

---

1 2 3 4 5 6

<div> <span class="c a b">Remplacé</span> mais <span class="b">Remplacé</span> mais <span class="d">Bonsoir</span> mais <span class="b a">Remplacé</span> </div>

---

Bonjour,
ce qui me pique les yeux c'est cette pseudo optimisation pour faire quoi ... !?! ... c.ier le développeur qui devra reprendre éventuellement le code.

• La boucle for est défini, plus ou moins, comme étant de la forme

Code:

---

1 2 3

for (Initialisation; Condition; Expression) { Instruction }

---

même si elle est conforme tout mettre dans l'expression final m'apparaît comme étant contre productif, lisibilité, maintenance.

• Concernant l'utilisation de Array.prototype.slice.call( elle ne sert à rien, car on peut tout à fait boucle sur une « HTMLCollection ».

• Pourquoi créer une fonction, il aurait du aller au bout de la « logique » en écrivant quelque chose comme

Code:

---

1 2 3 4 5 6

for( var obj, i=0, spans = Array.prototype.slice.call(document.getElementsByTagName('span'), 0); i<spans.length; // obj = spans[i++], obj.className !== 'b' || maFonction(obj) obj = spans[i++], obj.className !== 'b' || (obj.innerHTML = 'Remplacé') );

---

• Même si l'on peut comprendre la non utilisation d'une boucle for .. of, comme indiqué par daniehagnoul, peut être que le script date un peu, je me demande pourquoi ne pas avoir utilisé en lieu et place de getElementsByTagName plutôt un querySelectorAll, disponible depuis quand même pas mal de temps et qui permet de passer un sélecteur CSS qui pourrait même déjà filtrer tes éléments.

Code:

---

1 2 3 4

const oElems = document.querySelectorAll("span.b"); for (const elem of oElems) { elem.textContent = "Remplacé"; }

---

En gros ce n'est pas ce que je montrerais dans les écoles de développement :mrgreen:


EDIT : j'ai oublié de signaler

Citation:

---

Envoyé par bonjourajax

Le point virgule a la fin sert a rien

---

Dans cette construction il est indispensable.