JS笔记 ( 五) for循环、while循环、do while循环

一、for 循环

如果数数,从1打印到100;

console.log('1');
.....
console.log('100');
//这样不实际

//for循环的方法
for( var i = 1;i<=100 ; i++  ){
    console.log( i );
}for循环里面写三条语句;
 1.记录次数;            i 初始从哪开始 。
 2.判断循环的次数;       判断条件,临界值;如超过临界值的时候,就不要做循环了。
 3.步长;                每次判断之后,来改变步长,也就是i的变化量。 比如 i++;
         原理:
      步骤代表:
            1:定义阶段   var i = 1;
            2: 判断阶段   i<=100
            3:递增阶段   i++
            4. 逻辑代码阶段   console.log( i )
            
    【执行顺序】  
        1 - 2 - 4 - 3 - 2 - 4 - 3 - 2 - 4 - 3 -2 - 4 - 3 ~~~~直到循环判断不为真
​for 循环的运用:

//给每一个按钮绑定事件!没for循环的做法:每一个都绑定事件

btns[0].onclick = function(){}
···
btns[8].onclick = function(){}

运用for循环:

<body>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button>7</button>
	<button>8</button>
</body>
<script>
	var btns = document.getElementsByTagName('button');
	for( var i = 0 ;i< btns.length ;i++ ){
	    
	  btns[i].onclick = function(){
	    console.log( i );
	  }
	   console.log(i); //for循环结束之后 i = 7
	   for循环进来的时候,直接给对象绑定事件,事件函数放着,没有触发事件函数,
	   这里的for循环做的事仅仅是来给对象注册事件。
	   
</script>

自定义属性保存值;
<body>
	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
	<button>按钮6</button>
	<button>按钮7</button>
	<button>按钮8</button>
</body>
<script>
	var btns = document.getElementsByTagName('button');
	for( var i = 0 ;i< btns.length ;i++ ){
	    btns[i].index = i;
	  	btns[i].onclick = function(){
	    	console.log( this.index ); //点击拿到对应的自定义绑定属性的index的值
	  }
	
	拆开来看
	btn[0].index = 0;
	btn[1].index = 1;
	btn[2].index = 2;

	btn[0].onclick = function (){ console.log(this.index)}//0
	btn[1].onclick = function (){ console.log(this.index)}//1
	btn[2].onclick = function (){ console.log(this.index)}//2
</script>

break 停止循环

比如是一个100次的循环,但是 i === 18 的时候想要结束循环要怎么办呢?
此时用到 break

for( var i = 0; i<50; i++ ){if( i ===18 ){ //在if判断为全等的情况下,可以打断;
	  //停止循环,,,
	 	 break;
	}
    console.log(i);
}

break从for循环开始,只要读取到break,后面循环全部结束

continue 跳出循环

比如是一个100次的循环,但是 i === 5 的时候不执行当前这一次的循环要怎么办呢?
此时用到 continue

for( var i = 0;i<50;i++ ){
	if( i===5 ){
	       continue;//结束当前这一次循环,而不是所有都没有了。
	 }
	 console.log(i);
}

只要读取到continue ,结束当前循环,后面还是会继续执行! 并不像break全部结束

二、while循环

执行顺序:先判断后执行; 最后在判断的时候停掉

<body>
	<button>button1</button>
	<button>button2</button>
	<button>button3</button>
	<button>button4</button>
	<button>button5</button>
	<button>button6</button>
	<button>button7</button>
	<button>button8</button>
</body>
<script>
	var btns =  document.getElementsByTagName('button');
	var i = 0;
	while( i<btns.length){//决定当前是否循环;
	    btns[i].i = i;
	    btns[i].onclick = function(){
	        alert( this.i );
   		}
   		i++;
	}
//括号里面是判断条件;在性能上是没有什么区别的; 只是for需要写上分号,while不用加上分号
</script>

三、 do while循环

先执行后判断所以怎么样都会执行一次

<body>
	<button>button1</button>
	<button>button2</button>
	<button>button3</button>
</body>
<script>
	var btns =  document.getElementsByTagName('button');
	var i = 0;
	do{
	//执行内容
		btns[i].i = i;
		btns[i].onclick = function(){
			alert( this.i );
		}
		i++
	}while(i<btns.length) // 判断条件
</script>

四、for 循环嵌套

for( var i = 0;i<5;i++ ){
    for( var j = 0; j<6;j++ ){
        console.log('我是j值是'+j);
    }
    console.log( '我是i值是'+i );
}
i j 的变化
第一次循环
		i ----> 0
		j ----> 0,1,2,3,4,5
第二次循环
		i ----> 1
		j ----> 0,1,2,3,4,5
第三次循环
		i ----> 2
		j ----> 0,1,2,3,4,5
......
//代码解析:从外及里,里边的相当于外边的循环体;
//外边的for循环想要执行到第二次的时候,需要把里面的for循环全都执行完。
//嵌套for循环不要共用同一个变量;
//会变成一个死循环的!
 

五、死循环

死循环:一直无限地执行下去,永远不会停止(除非关闭浏览器);

for(var i = 0; true ;i++){
     i++
}
//无休止执行 因为 中间的判断条件是为真 只要为真就执行一次所以无休止执行
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值