js中的循环

js中的循环

1. for循环 =>循环数组

   • 循环：一轮一轮的重复做某一件事情（真是项目中一般都控制相关的事情执行一遍）

   • 使用：for(设置初始值；设置循环条件，控制循环次数；每一轮循环结束购处理的事情[步长累加])

   • 循环体

     1. 设置初始值
     2. 验证条件（条件不成立循环体结束）
     3. 循环体
     4. 步长累加
     5. 再次验证
     6. 循环体
     7. 一直重复执行，一直到验证条件不成立为止

   • 循环体可能出现的两个关键词

     1. break:强制结束整个循环，所有在循环体中的代码都不在执行

        for(var=0;i<5;i++){
        	console.log(i);// =>0
        	break;// 结束整个循环
        }
        console.log(i);// =>0
        

     2. continue:结束本轮循环体，下一轮继续执行，但当前循环体中continue下面的代码不在执行

        for(var i=0;i<5;i++){
        	if(i==0){
        		continue;
        	}
        	console.log(i); // => 1 > 2 > 3 > 4
        };
        console.log(i);// =>5
        

   • 遍历（循环/迭代）数组中的每一项：因为数组有索引个length属性，所以我们能够知道循环次数，也能基于索引获取对应项，使用for循环就可以解决

     let arr=[10,20,30];
     for(var i=0;i<arr.length;i++){
     	console.log(arr[i]);// => 10 > 20 > 30
     };
     

2. for in循环 =>循环对象

   遍历对象中的每一个属性：我们无法直接获取到对象中有多少个属性，也就无法知道循环多少次，所以无法使用for循环，真实项目中遍历对象我们基于的是for in循环

   • 使用：创建变量（存储的是属性） in 对象

   • 当前对象中有多少可枚举的属性，就循环多少次

   • key 变量存储的是每一次循环的属性名

   • obj[key] 获取key变量中的对象属性名的属性值

     var obj={
     	name:'teal',
     	age:20,
     	skill:'睡觉'
     };
     for(var key in obj){
     	consoel.log(key);// =>"name" > "age" > "skill"
     	console.log(obj[key]);// 'teal' > 20 > '睡觉'
     }
     

     for in遍历对象的时候，是按照从小到大的机制遍历数字属性的

     var obj={
     	name:'teal',
     	age:20,
     	1:12,
     	5:30
     }
     for(var key in obj){
     	console.log(key); // => "1" > "2" > "name" > "age"
     	console.log(obj[key]); // => 12 > 30 > 'teal' > 20
     }
     

3. 练习

   for (var i=0;i<5;i++){
   	console.log(i); // => 0 > 1 >2 >3 >4
   	continue;
   }
   console.log(i);// =>5
   

   for(var i=0;i<5;i++){
   	continue;
   	console.log(i);// =>应continue会结束本此循环项，所以以下代码不会执行
   };
   console.log(i); // =>5
   

   for(var i=1;i<=10;i+=2){ // =>2+2 >5+2 >
   	if(i<=5){
   		i++; // =>1+1 > 4+1 
   		continue; // => 结束本次循环
   	}else{
   		i+=2;// =>7+2
   		break;// =>结束整个循环
   	};
   	i--;// 因上面个判断条件中有结束循环语句，所以不可能执行以下代码
   	console.log(i);
   };
   console.log(i);// =>9
   

   for(var i=3;i<12;i++){
   	if(i<3){
   		i++;
   		break;
   	};
   	if(i>9){
   		i+=2;
   		continue;
   	};
   	i--;
   };
   console.log(i)//;
   //解析：以上代码为死循环，1、循环过程首先判断i(3)小于12吗，条件成立.2、进入循环项，判断i(3)小于3吗，条件不成立，集训执行下面代码，判断i(3)大于9吗，条件不成立，继续执行下面代码，让i--(3-1)。本次循环结束，执行i++(2+1)，继续判断i(3)小于12，成立进入循环项，继续判断，就这样一直进入了死循环