本篇文章的内容是js中的循环遍历，现在在这里分享给大家，也可以给有需要的朋友做一下参考
方式一
<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>方式一利用for循环来遍历数组的缺点就是：代码不够简洁。
下面介绍一个写法更加简洁的方式。
方式二
<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>利用forEach循环代码量少了很多，写法更加简洁，缺点就是：无法中断停止整个循环。
方式三
<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的优势：
写法比for循环简洁很多；
可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
结合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循环遍历的详细内容。更多信息请关注PHP中文网其他相关文章！
