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

最新推荐文章于 2023-09-21 09:01:30 发布
最新推荐文章于 2023-09-21 09:01:30 发布
阅读量141 收藏 1
点赞数 1
分类专栏： 个人学习 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DragonLoveYQ/article/details/109614099
版权

一、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++
}
//无休止执行 因为 中间的判断条件是为真 只要为真就执行一次所以无休止执行
DragonLoveYQ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript——for循环
huijie_0716的博客
06-18 2906
目录循环JS中的循环for循环1、语法结构 2、执行过程3、断点调试 4、for循环重复执行相同的代码5、 for循环重复执行不同的代码 6、 for循环重复某些操作循环的目的：可以重复执行某些代码for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下： 2、执行过程 3、断点调试 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示借误，停下。
JavaScript中for循环，while循环，do......while循环。
weixin_44382073的博客
01-09 718
一.for循环 for循环语法结构： for(循环条件初始化;循环条件判断;循环迭代){ 循环体; } 执行规则： 第一步：循环条件的初始化 var i=0; 只在最开始执行一次 第二步：循环条件判断 i&amp;lt;5; 若判断条件结果为真：则执行循环体 若不成立： 结束循环; 第三步：循环迭代 i++ 第四步：回到第二步 案...
JavaScript--变量作用域
weixin_30663471的博客
10-14 60
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <...
JS中的for循环
ct5211314的博客
05-05 1万+
在项目中，我们常常会遇到需要循环去处理数据的地方，常用的循环方式有for，for...in，for...of，forEach。这三个有什么区别嘞？下面就简单的了解一下相关的用法与区别。 一、for循环 for循环是根据数组的长度去确定循环次数的，而对象是没有长度这个属性的，所以，for循环不能用来遍历对象，可以用来遍历数组和字符串。 var arr = [1,2,3,4,5,6] var obj={ name:"小陈", age:20, } var str="你好...
详解JS中常见的5 种 for 循环
weixin_42504805的博客
09-21 1万+
详解JS中常见的5 种 for 循环
js的for循环语句
m0_63639281的博客
08-01 4123
赶紧来学习技术
【C语言学习笔记（五）】while循环与for循环
Backlight__的博客
07-28 1609
while循环有一点非常重要在构建while循环时，必须让测试表达式的值有变化，表达式最终要为假，这样才能终止循环；逗号运算符有两个性质，一是，逗号运算符保证了被它分隔的表达式从左往右求值（换而言之，逗号就是一个序列点，所有逗号左侧项的所有副作用都在程序执行逗号右侧项之前发生）。所谓的“有条件”指的是语句部分的执行取决于测试表达式描述的条件，只有当满足测试条件的时候才能进入循环体。while循环中经常依赖测试表达式作比较，这样的表达式被称为关系表达式，出现在关系表达式中的运算叫做关系运算符。...
JavaScript语言笔记包括运算符、条件语句、循环、类型转换等
04-09
### JavaScript语言笔记详解 #### 一、JavaScript 运算符 **JavaScript运算符**是用于执行基本算术操作的关键组成部分。下面将详细介绍算术运算符、赋值运算符以及字符串运算符。 ##### 算术运算符 1. **加法 (`...
狂神说系列 JavaScript笔记
06-15
- 控制流：掌握条件语句（if...else）、循环（for、while、do...while）以及跳转语句（break、continue）有助于编写结构化的代码。 - 函数：函数是JavaScript中的可重用代码块，学习函数声明、函数表达式、参数...
原生javascript笔记.zip
07-04
2. **控制流**：条件语句（`if...else`）、循环（`for`, `while`, `do...while`）和开关语句（`switch`）是编程中常见的流程控制工具，用于根据不同条件执行不同的代码块。 3. **函数**：函数是JavaScript中可重用...
JavaScript笔记知识点整理图文.pdf
11-29
* 循环语句：for、while、do-while * 跳转语句：break、continue、return 五、JavaScript函数 * 函数的定义：函数声明、函数表达式、箭头函数 * 函数的调用：函数名、函数参数、函数返回值 * 函数的作用域：全局...
js 笔记 javascript 学习笔记
11-28
3. 控制流程：条件语句（如`if...else`）、循环（如`for`、`while`、`do...while`）和开关语句（`switch`）用于控制程序的执行路径。例如，`if (age > 18) { console.log("成年") } else { console.log("未成年") }`...
JS中的4种for循环
热门推荐
wuyujin1997的博客
03-22 18万+
分类 普通for循环 自行指定循环次数。 for (i = 0; i < loopTimes; i++) { console.log(i); } for..in循环 属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。 但有一个缺点：如果手动向数组添加成员属性，则： 虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性。 for (property...
js中的for循环
qq_40410916的博客
09-02 5063
for循环经常使用，js常用有4中for循环， 普通 for（表达式1；表达式2；表达式3），for（ i in obj），for （item of obj），foreach(callback(val,index,arr),thisArg ) for for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。 let str = ''; for (let i = 0; i < 9; i++) {
js常用的几种for循环
Change!
11-18 6407
1.for循环,直接循环数组，可拿到数组对象中每一个item值，比如我需要给后台传一个id数组，如下 let orderId = [] for(var i in this.selectedData){ console.log(this.selectedData[i])//打印可看到取到的值 orderId.push(this.selectedData[i].orderId)//取到数组每一个对象中的id，push到数组中 } 2.forEach循环。同样传id数组 let orderProdu
JS中for循环的四种写法
曹进的博客
09-14 3559
JS中for循环的四种写法
js中For循环讲解
吃瓜群众
06-13 2444
For循环用法
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
JavaScript学习笔记：从基础到DOM编程
此外，笔记详细介绍了JavaScript的基础语法，包括数据类型、变量、运算符，以及各种控制流语句，如switch、while、do...while、for循环，还有break和continue语句。 在函数部分，笔记讨论了参数可变的函数和动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值