目录
前言
在比较之前我们先了解两个概念：
- 迭代（iterate），指的是按照某种顺序反复多次执行一段程序，通常会有明确的终止条件。
- 遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。
一、四种循环
1、for循环
for语句是一种先测试循环语句，（即先检测退出条件，再执行循环体内的代码.)
- 语法：
for(初始化变量;条件表达式;操作表达式){
循环体语句;
}
(1)三个表达式都可以省略,但是表达式之间的分号不能省略。都省略的话就创建了一个无穷循环。
for(;;){ //无穷循环
循环体语句
}
(2)初始化变量：给循环变量、其他变量进行初始化。
(3)条件表达式：控制循环体语句是否执行。如果只包含条件表达式for循环就变成while循环。
(4)操作表达式：使循环趋向结束的语句 。
- 用法：
(A) for循环用于遍历数组，不可直接遍历对象。(需要用Object.key()属性转化)
1//for循环遍历数组
2var arr = [1,2,3,4,5]
3for (let i = 0; i < arr.length; i++) {
4 console.log(arr[i]);
5} 1//for循环遍历对象
2var obj = {a:1,b:2,c:3} //对象
3
4var obj2 = Object.keys(obj) //用Object.key()属性转化为数组类型
5console.log(obj2);
6
7for (let i = 0; i < obj2.length; i++) {
8 console.log(obj2[i]+':'+obj[obj2[i]]);
9}(B) 能使用break，continue语句跳出循环。
1var arr = ['a','b','c','d','e']
2for (let i = 0; i < arr.length; i++) {
3 if(i===1){
4 console.log('跳过索引为1的元素');
5 continue;
6 }
7 console.log(arr[i]);
8}
1var arr = ['a','b','c','d','e']
2for (let i = 0; i < arr.length; i++) {
3 if(i===3){
4 console.log('跳出循环');
5 break;
6 }
7 console.log(arr[i]);
8}
2、for…in循环
for..in语句是一种严格的迭代语句，用于枚举对象中的非符号键属性(包括它的原型链上的可枚举属性)，我们可以简单理解为它适合遍历对象。
在这里解释一下非符号键： 不是 Symbol 的键。
在任何迭代中，键为 Symbol 都会被忽略。只能使用 Object.getOwnPropertySymbols 获取所有的 Symbol 键。
- 语法：
for(var 变量 in 数组名或集合名) //变量中存放的数组或集合的索引
{
数组名[变量]
}
- 用法：
1var person = {name:'张三',age:22,gender:'男'}
2
3for(var index in person){
4 console.log(index+person[index]);
5}
3、for…of循环
for…of语句是一种严格的迭代语句，用于遍历可迭代对象的元素。
语法：
for(var 变量 of 数组名或集合名) //变量中存放的是数组或集合中的元素
{
console.log(变量);
}
- 用法：
遍历数组：
1var person = ['金','木','水','火','土']
2
3for(var value of person){
4 console.log(value);
5
6}遍历对象(无法直接遍历对象)：
1var person = {name:'张三',age:22,gender:'男'}
2var obj = Object.keys(person); //for...of也不能直接遍历对象，跟for一样需要转换
3for(var value of obj){
4 console.log(value+person[value]);
5}4、forEach方法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
- 语法：
arr.forEach(function(k){ //依次从数组中取出元素放在k中,然后将k作为参数传递给函数
console.log(k);
})
注意: forEach() 对于空数组是不会执行回调函数的。
forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。
- 用法：
遍历数组：
1var arr = ['金','木','水','火','土']
2arr.forEach(function (value) { //参数1：value---正在遍历的元素
3 console.log(value);
4})
5
6arr.forEach(function (value,index) { //参数2：index---元素的索引
7 console.log(index);
8})
9
10arr.forEach(function (value, index,Array) { //参数3：Array---正在遍历的数组
11 console.log("Array="+arr);
12})
二、比较
1、优缺点
for:
- 优点：程序简洁，结构清晰，循环初始化，循环变量化和循环条件位置突出。
- 缺点：结构比while循环复杂，容易出编码错误。
for…in:
- 优点：可以遍历数组的键名，遍历对象简洁方便。
- 缺点：返回可枚举的属性的顺序因浏览器而异。
for…of:
- 优点：避免了for…in的所有缺点，支持break,continue,return。支持遍历map，object,array,set string等。
- 缺点：不适用于处理原有的原生对象。
forEach:
- 优点:便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率。
- 缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据。
2、总结
(1) for循环、for…in循环和for..of循环能中断循环(使用break,continue)；forEach不可以。
(2) for循环、for..of循环和forEach不能直接遍历对象，for…in可以。
(3) for…in遍历的是数组的索引，for…of遍历数组元素值。
(4) for…of不能循环普通的对象，需要通过和Object.keys()搭配使用。
(5) 如果for…in要迭代的变量是null或undefined,则不执行循环体。
(6) **forEach（value，index，Array）**不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据。被调用时，不会改变原数组，也就是调用它的数组。
(7**)** forEach与for当循环遍历为空的数组时，forEach会跳过为空的值，for不会跳过为空的数据，会直接显示undefined。两者都能识别出NULL。