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

最新推荐文章于 2022-08-01 20:36:04 发布
最新推荐文章于 2022-08-01 20:36:04 发布
阅读量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
    评论
专栏目录
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 4120
赶紧来学习技术
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 5028
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++) {
狂神说系列 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("未成年") }`...
JavaScript 学习笔记之语句
12-03
本文主要探讨了JavaScript中的两种关键控制结构：条件分支语句和循环语句，以及精准的迭代语句`for-in`和`label`语句的作用。 首先，条件分支语句是程序根据不同条件执行不同代码块的关键。在JavaScript中，`if`...
浅谈js for循环输出i为同一值的问题
11-26
1、最近开发中遇到一个问题，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> [removed] [removed]=function() { var ps = docum
js中For循环讲解
吃瓜群众
06-13 2441
For循环用法
Java基础系列-《流程控制--循环结构》
09-08 1415
前言： 张浩Java考试成绩未达到自己的目标。为了表明自己勤奋学习的决心，他决定写一百遍“好好学习，天天向上！”根据前面学习的内容我们知道System.out.println(“好好学习，天天向上！”)可以将这句话打印出来，但是现在是要打印100次，那是不是我们需要写100次呢？答案肯定是否定的，在java中我们要避免写重读的代码，我们要尽量“偷懒”让代码能重复使用。那如何才能写一次输出语句，让它运行100次呢？接下来我们就要学习流程控制中的--循环结构。 一、什么是循环结构 1.循环简单理解就是重读
JS之循环
m0_61214373的博客
08-01 748
js之循环
python装饰器扩展（作用域，闭包）
__sebass博客
06-23 333
1.函数作用域 函数作用域LEGB，L&gt;E&gt;G&gt;B - L : local 函数内部作用域 - E : enclosing 函数内部与内嵌函数之间 - G ：global 全局作用域 - B ： build-in 内置作用域 变量和函数查找 passline = 60 def checkvalue(val): passline = 90 if ...
js中for循环是如何进行的？
simple_Xsg的博客
04-06 2223
Javascript中的for是如何实现循环的？ 一、语法结构 单for循环 for(初始化变量； 条件表达式； 操作表达式){ 循环体 }; 双重for循环（也叫循环嵌套） for(外层初始化变量； 外层的表达式； 外层的操作表达式){ for(里层的初始化变量； 里层的条件表达式； 里层的操作表达式){ 循环体 } }; 二、循环机制 1. 初始化变量：就是var声明的变量，通常作为计数使...
js for循环
weixin_41342195的博客
08-15 689
一、前景       先说说for in 和 for of 的区别吧，知道in 和 of 的同学都会问，这个in 和 of都在for循环中有什么区别，在着我讲一下是有区别的，for循环中 in 是打印 key的值，而of 是打印 value的值。 in还有这么一个意思。 in in 操作检查对象中是否有名为 property 的属性。也可以检查对象的原型，以便知道该属性是否为原型链的一部分。...
【JavaScript】 8 - JavaScript流程控制-循环
郑SaScha的博客
07-16 395
关于JavaScript流程控制两种循环的简单介绍
JavaScript 中的 for 循环
weixin_33810006的博客
10-08 233
在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是： 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是： for-of 下面我们就来看看这 4 种for循环。 简单 for 循环 下面先来看看大家最常见的一种写法： var arr ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值