JS中的循环 for、while、do-while、for in 、 for of

循环结构的执行步骤

1. 声明循环变量；
2. 判断循环条件;
3. 执行循环体；
4. 更新循环变量；
5. 然后循环执行2-4，直到条件不成立，跳出循环。

环控制语句

1. break：跳出本层循环，继续执行循环后面的语句。
   如果循环有多层，则break只能跳出一层。
2. continue：跳过本次循环剩余的代码，继续执行下一次循环。
   ①对与for循环，continue之后执行的语句，是循环变量更新语句i++；
   ②对于while、do-while循环，continue之后执行的语句，是循环条件判断；
   　因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。

for(var i = 1; i < 10; i++){　
   if(i == 4){
       continue;
   }
   console.log(n);//1 2 3 5 6 7 8 9
}
for(var i = 1; i < 10; i++){
    if(i == 4){
        break;
    }
    console.log(i);//1 2 3
}

1. for循环

for(初始化①；条件②；自增③){
	循环体④
}

1. 三个表达式：①声明循环变量；②判断循环条件；③更新循环变量
2. 三个表达式都可以有多部分组成，第二部分多个判断条件用&& ||连接，第一三部分用逗号分割
3. 执行特点：先判断再执行
4. 执行顺序： 初始化① 》 判断② 》 执行循环体④ 》 自增③ ， ②④③ ②④③… …直到②为假结束
5. 主要用于数组循环

2. while 循环

lessons =["HTML","CSS","JS","Vue"];
var i=0;
while (lessons[i])
{
console.log(lessons[i] + "<br>")
i++;
};

while 循环和for循环底层处理是一样的，只是for可以把声明，条件，自增都放在一起

3. do-while循环

do-while 循环跟while循环相似， 但do-while先执行再判断，即使初始条件不成立，do-while循环至少执行一次；

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3 ， 2， 1

4. for in 循环

let obj = {name:'Jenny',age:18}
for(let key in obj){
 console.log(key,obj[key])
}
// name Jenny
// age 18

1. for…in循环主要是为遍历对象而设计的，不适用于遍历数组
2. key代表对象的 键 值，obj[key] 代表对应的 值，也可用于数组遍历，但key输出为字符串，直接计算会出错。
3. 注意： for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)判断一个属性是不是对象自身上的属性

5. for of 循环

1. ES6新增语句，用来替代 for in 和 forEach，遍历获得键值，不同于forEach方法，它可以与break、continue和return配合使用
2. 可遍历 Arrays（数组）, Strings（字符串）,DOM NodeList 对象、arguments对象的例子， Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构

// 数组
let arr = [a, b, c, d]
for (let val of arr) {
  console.log(val); // a b c d
}
// 字符串
var str = "hello";
for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');// 'a' 'b'

6. 数组forEach 循环

1. forEach 循环在所有元素调用完毕之前是不能停止的，它没有 break 语句
2. 可用 try catch 语句，就是在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了
3. forEach 循环可以修改原来的数组

let arr = [1,2,3];
arr.forEach(function(val,index){
 console.log(val,index)
})
// 1 0
// 2 1
// 3 2

7. 数组 map()

1. map() 方法返回一个新数组，数组中的元素 由 原始数组元素调用函数处理后的值
2. map()会分配内存空间存储新数组并返回，forEach()不会返回数据。所以 map()的执行速度 > forEach()的执行速度

let arr = [1,2,3];
let tt = arr.map(function(i){
 i *= 2
 console.log(i)
 return i
})
// [2,4,6]

8.数组 reduce()

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

let tt = arr.reduce(
(total, currentValue, currentIndex, arr)=>{// 计算代码块}, 
initialValue)