parcours de boucle js

Le contenu de cet article concerne le parcours de boucles en js. Maintenant, je le partage avec tout le monde ici, et il peut également être utilisé comme référence pour les amis dans le besoin

Méthode 1.

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">i </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">0</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">;<span style="margin:0px;padding:0px;">i</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">.length;<span style="margin:0px;padding:0px;">i</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">++</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">){<br/>        </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">//...<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">    }</span>

Méthode 1 L'inconvénient d'utiliser un for La boucle pour parcourir le tableau est : Le code n'est pas assez concis.

                                                                                                                                                                                          .

Méthode 2

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/><span style="margin:0px;padding:0px;">    arr</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">forEach</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">function </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(253,151,31);">value</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(253,151,31);">index</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">) {<br/>       </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">//...<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">    });<br/>    <br/></span>

L'utilisation de la boucle forEach nécessite beaucoup moins de code et la méthode d'écriture est plus concise. L'inconvénient est qu'elle ne peut pas interrompre et. arrêter toute la boucle.

Méthode 3

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">i </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">in </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">){<br/>        </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">//...<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">    }<br/>    <br/></span>

for...in循环更常用于对象的循环，如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。

来看看for...of的是实现：

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">value </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">arr</span>){<br/>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">value</span>);<br/>    }<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">打印结果：依次输出：</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">1 2 3 4 5<br/><br/></span>

看样子是不是有点眼熟，很像for...in？确实很像。它的实现跟for...in很类似。

我们列举一下for...of的优势：

1. 写法比for循环简洁很多；

2. 可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；

3. 结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。

   
   

分别来展示一下上述的几个优点：

循环可以终止

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">value </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">arr</span>){<br/>        </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">if</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">value </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">== </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">){<br/>            </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">//</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">终止整个循环<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">            break</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">;<br/>        }<br/>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">value</span>);<br/>    }<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">打印结果：</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">1 2<br/><br/></span>

以上案例：用break实现了终止整个循环，不会继续后面的遍历，所以打印结果为：1 2。

可跳过当前循环

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">value </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">arr</span>){<br/>        </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">if</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">value </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">== </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">){<br/>            </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">//</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">跳过当前循环，继续后面的循环<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">            continue</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">;<br/>        }<br/>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">value</span>);<br/>    }<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">打印结果：</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">1 2 4  5<br/><br/></span>

用continue跳过当前循环，继续后面的循环，所以打印结果为：1 2 4 5。

得到数字类型的索引

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    var </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">arr </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">[</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">1</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">2</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">3</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">4</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">,</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(174,129,255);">5</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">];<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">index </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">arr</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">keys</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">()){<br/>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">index</span>);<br/>    }<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">打印结果：依次输出</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">:0 1 2 3 4<br/><br/></span>

使用数组的扩展keys( )（第八节有介绍，点击查看），获取键名再遍历，得到的index是数字类型的。

此外，相比于for...in循环专门为对象设计，for...of循环的适用范围更广。

遍历字符串

for...of 支持字符串的遍历。

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);"><br/>    let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">word </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(230,219,116);">"</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(230,219,116);">我是前端小菜鸟</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(230,219,116);">"</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">;<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">w </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">word</span>){<br/>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">w</span>);<br/>    }<br/></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;font-size:18px;color:rgb(117,113,94);">打印结果：我  是  前  端  小  菜  鸟<br/><br/></span>

遍历DOM List

for...of支持类数组的遍历，例如DOM List。

<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);"><br/>    <</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><span style="margin:0px;padding:0px;">1</span></</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><br>    <</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><span style="margin:0px;padding:0px;">2</span></</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><br>    <</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><span style="margin:0px;padding:0px;">3</span></</span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(227,227,255);">p</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">><br></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    //</span><span style="margin:0px;padding:0px;color:rgb(117,113,94);">假设有<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;">3</span>个<span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;">p</span>元素</span><span style="margin:0px;padding:0px;"><br></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">pList </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">= </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">document</span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">getElementsByTagName</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(230,219,116);">'p'</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">);<br><br></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">    for</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(249,38,114);">let </span><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">p </span></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">of <span style="margin:0px;padding:0px;">pList</span>){<br>        <span style="margin:0px;padding:0px;">console</span>.</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(166,226,46);">log</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(248,248,242);">(<span style="margin:0px;padding:0px;">p</span>);<br></span><span style="margin:0px;padding:0px;color:rgb(248,248,242);font-family:Consolas;font-size:18px;line-height:1.6;">    }<br></span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);">    // </span><span style="margin:0px;padding:0px;color:rgb(117,113,94);">打印结果：</span><span style="margin:0px;padding:0px;font-size:18px;font-family:Consolas;color:rgb(117,113,94);"><p>1</p><br></span><span style="margin:0px;padding:0px;color:rgb(117,113,94);font-family:Consolas;font-size:18px;line-height:1.6;">    //          <p>2</p><br>    //          <p>3</p></span>

       还有一些其它的遍历 后续再添加~···

相关推荐：

JS数组排序

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!