本篇文章的内容是js中的循环遍历，现在在这里分享给大家，也可以给有需要的朋友做一下参考
方式一
var arr = [1,2,3,4,5];
for(let i = 0;i<arr.length;i++){
//...
}
方式一利用for循环来遍历数组的缺点就是：代码不够简洁。
下面介绍一个写法更加简洁的方式。
方式二
var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
//...
});
利用forEach循环代码量少了很多，写法更加简洁，缺点就是：无法中断停止整个循环。
方式三
var arr = [1,2,3,4,5];
for(let i in arr){
//...
}
for...in循环更常用于对象的循环，如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。
来看看for...of的是实现：
var arr = [1,2,3,4,5];
for(let value of arr){
console.log(value);
}
//打印结果：依次输出：1 2 3 4 5
看样子是不是有点眼熟，很像for...in？确实很像。它的实现跟for...in很类似。
我们列举一下for...of的优势：
写法比for循环简洁很多；
可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
-
结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。
分别来展示一下上述的几个优点：
循环可以终止
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//终止整个循环
break;
}
console.log(value);
}
//打印结果：1 2
以上案例：用break实现了终止整个循环，不会继续后面的遍历，所以打印结果为：1 2。
可跳过当前循环
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//跳过当前循环，继续后面的循环
continue;
}
console.log(value);
}
//打印结果：1 2 4 5
用continue跳过当前循环，继续后面的循环，所以打印结果为：1 2 4 5。
得到数字类型的索引
var arr = [1,2,3,4,5];
for(let index of arr.keys()){
console.log(index);
}
//打印结果：依次输出:0 1 2 3 4
使用数组的扩展keys( )（第八节有介绍，点击查看），获取键名再遍历，得到的index是数字类型的。
此外，相比于for...in循环专门为对象设计，for...of循环的适用范围更广。
遍历字符串
for...of 支持字符串的遍历。
let word = "我是前端小菜鸟";
for(let w of word){
console.log(w);
}
//打印结果：我 是 前 端 小 菜 鸟
遍历DOM List
for...of支持类数组的遍历，例如DOM List。
<p>1p>
<p>2p>
<p>3p>
//假设有3个p元素
let pList = document.getElementsByTagName('p');
for(let p of pList){
console.log(p);
}
// 打印结果：1
//2
//3
还有一些其它的遍历 后续再添加~···
相关推荐：
