JS中for循环的语法是什么,用法要注意哪些
Admin 2022-08-22 群英技术资讯 423 次浏览
一:for 循环
for循环会将控制循环次数的变量预先定义在for语句中,因此for循环语句能够按照已知的循环次数进行循环操作,适用于明确知道脚本需要运行的次数的情况。
for 循环的语法格式如下:
for (初始化语句; 循环条件; 变量更新--自增或自减) { 语句块; }
for循环语句可以拆解为4个部分:()
号中的三个表达式和{}
中的“语句块”,下面我们来分析一下。
语句解析:
初始化语句(表达式1):主要是初始化一个变量值,用于设置一个计数器,即循环开始的值;该语句仅在第一次循环时执行,以后都不会再执行。
循环条件(表达式2):循环执行的限制条件,用于控制是否执行循环体中的代码;如果条件为TRUE,则循环继续,如果条件为FALSE ,则循环结束,立即退出循环。
变量更新(表达式3):一个带有自增或自减操作的表达式,循环每执行一次,马上修改计数器的值,以使循环条件逐渐变得“不成立”。
语句块:条件判断为真时,需要执行的若干代码。
上面的描述是不是有点绕,我们来看看for循环语句的执行流程图,可以更直观的了解for循环的执行过程:
了解了for循环的执行过程,接下来我们来实际操作,做一个小题,来看看有没有掌握吧!
示例:计算从1加到100的和
<script type="text/javascript"> var sum=0; for(var i=1; i<=100; i++){ sum+=i; } console.log('1 + 2 + 3 +...+ 99 + 100 = '+sum); </script>
for 循环中的三个表达式
JS for 循环中括号中的三个表达式是可以省略的,但是用于分隔三个表达式的分号不能省略,如下例所示:
// 省略第一个表达式 var i = 0; for (; i < 5; i++) { // 要执行的代码 } // 省略第二个表达式 for (var y = 0; ; y++) { if(y > 5){ break; } // 要执行的代码 } // 省略第一个和第三个表达式 var j = 0; for (; j < 5;) { // 要执行的代码 j++; } // 省略所有表达式 var z = 0; for (;;) { if(z > 5){ break; } // 要执行的代码 z++; }
二:for 循环嵌套
无论是哪种循环,都可以嵌套使用(即在一个循环中再定义一个或多个循环)。
语法格式:
for (初始化语句1; 循环条件; 变量更新--自增或自减) { //语句块1; for (初始化语句2; 循环条件; 变量更新--自增或自减) { //语句块2; for (初始化语句3; 循环条件; 变量更新--自增或自减) { //语句块3; ..... } } }
这里,我们定义了三个 for 循环的嵌套,当然,我们可以嵌套任意多个的 for 循环。
案例:for循环实现九九乘法口诀表
首先我们来观察一下九九乘法口诀表
可以得出图表的规律:
总共有9行9列,第几行就有几个表达式。
第 i 行,表达式就从 i*1 开始,一直到 i*i 结束,共有 i 个表达式(这个效果我们可以通过一次循环实现)。
因此,需要使用双重循环来控制输出,外层循环控制行数 i (i最小为1,最大为9),内层循环控制列 j (j最小为1,最大等于 i)。
实现代码:
for(var i = 1; i <= 9; i++){ //外层循环控制行 for(var j = 1; j <= i; j++) //内层循环控制列 { document.write(j+"*"+i+"="+j*i+" "); } document.write("</br>"); }
输出结果:
我们还可以向开头图那样,将99乘法表放到一个表格里输出:
document.write("<table>"); for (var i = 1; i <= 9; i++) { //外层循环控制行 document.write("<tr>"); for (var j = 1; j <= i; j++) //内层循环控制列 { document.write("<td>" + j + "*" + i + "=" + j * i + "</td>"); } //换行,控制每行的输出几个表达式 document.write("</tr>"); } document.write("</table>");
然后添加css样式,来修饰一下:
table { width: 600px; border-collapse: separate; } table td { border: #000 1px solid; text-align: center; }
看看输出结果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
node后台框架有:1、Koa,一个开源的Node web框架,用Generator来实现中间件的流程控制,用try/catch来增强异常处理;2、Nest,一个用于构建高效、可扩展的Node服务器端应用程序的框架;3、Socket,是用来在客户端和服务器端之间创建实时双向通信的框架;4、Sails,是一个非常稳固的Node框架,提供建立任何规模的Web应用所需要的所有功能。
这篇文章主要为大家详细介绍了使用js实现动态背景,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍的是vue项目中怎么样追踪数据变化的内容,下文有具体的实现代码及方法,对大家学习和工作都有一定的参考价值,需要的朋友可以了解看看。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008