目录
1、for循环
for(初始化变量;条件表达式;操作表达式){
循环体语句;
}
2、for in循环
for...in循环：遍历数组或集合的
for(var 变量 in 数组名或集合名) //变量中存放的数组或集合的索引
{
数组名[变量]
}
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log('原数组是：', arr);
var i = 0;
var j = arr.length - 1;
while (i < j) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
j--;
}
for(var k in arr){
console.log(arr[k]);
} 3、for of 循环
for...of循环：遍历数组和集合
for(var 变量 of 数组名或集合名) //变量中存放的是数组或集合中的元素
{
console.log(变量);
}
//for of循环 遍历数组循环
for (var k of arr){
console.log(arr[k]);
}4、forEach 循环
arr.forEach(function(k)
{ //依次从数组中取出元素放在k中,然后将k作为参数传递给函数
console.log(k);
})
//forEach 循环
arr.forEach(function(k)
{
console.log(k);
}
)5、三者区别
（1） for…in与for…of
for…in循环由于历史遗留问题，它所遍历的其实是对象的属性名称，而for…of所遍历的是可迭代对象的自身所有元素。
可以看出for…in不但把自身的属性名遍历出来，还将其原型上的属性遍历出来了，由此我们可以更进一步的确定for…in所遍历的为对象本身以及其原型对象所有可遍历属性的属性名。 而for…of则完全修复了这些问题，它只循环集合本身的元素
（2） for…in还存在的缺点
- 数组的键名为数字，但是for…in循环的时候是以字符串作为键名，如"1"、"2"、"3"等。
- 某些情况下，for…in循环会以任意顺序遍历键名。
（3）forEach与for…of
作为数组自带的forEach方法，没有办法与break、continue以及return配合使用，而for…of可以做到，下面为一个for…of中使用break的例子。
// for of 遍历
var a=[1,2,3,4,5];
for (var i of a){
if(i >3){
break;
}
console.log(i)
}
//1 2 3| 循环类型 |
说明 |
|---|---|
| for… | for循环中可以使用return、break等来中断循环 |
| for…in |
循环遍历的值都是数据结构的键值 |
| for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）,其所遍历的为对象的属性名（键），而非属性值。 | |
| for…of |
它是ES6中新增加的语法，用来循环获取一对键值对中的值 |
| for…of语法是ES6新引入的语法，for…of语法用于遍历可迭代（iterable）对象，js中的可迭代对象包括字符串String、数组Array、集合Set、字典Map、arguments 对象、DOM NodeList 对象等等，for…of语法用于遍历这些对象本身的元素 | |
| forEach |
对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。 |
| forEach作用于数组对象，用于遍历数组对象的每一个元素，并对每一个元素执行回调(callback)函数。 |